Main Infor" />

Макет второго <table> идет не так точно, как первый <table>

html css html-table

31 просмотра

3 ответа

Мой внешний вид второй таблицы не выглядит как первая таблица даже после копирования того же HTML-кода. Вот скриншот ниже:

просмотр стола

Таблица 1 HTML

<table cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td class="otab">
            Main Information
        </td>
    </tr>
</table>
<table width="100%" border="0" cellpadding="2px" cellspacing="0">
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Project :
        </td>
        <td class="field" style="width: 10%;">
            <asp:DropDownList ID="ddlProject" runat="server" Width="90%">
                <asp:ListItem Value="1">--Select--</asp:ListItem>
                <asp:ListItem Value="2">Hubtown project 1</asp:ListItem>
                <asp:ListItem Value="3">Hubtown project 2</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td class="label" style="width: 10%; font-family: Courier New; font-size: 120%;">
            Legal Entity :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtlegalEnt" runat="server" Width="90%" ReadOnly="true"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Village :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtVillage" runat="server" Width="89%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Taluka :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtTaluka" runat="server" Width="90%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Survey No :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtSurvey" runat="server" Width="89%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Hissa No :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtHissa" runat="server" Width="90%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 12%; font-family: Courier New; font-size: 120%;">
            Area(Hectares) :
        </td>
        <td class="field" style="width: 8%;">
            <asp:TextBox ID="txtArea" runat="server" Width="89%"></asp:TextBox>
        </td>
        <td class="label" style="width: 10%; font-family: Courier New; font-size: 120%;">
            Area(Guntha) :
        </td>
        <td class="field" style="width: 6%;">
            <asp:TextBox ID="txtGuntha" runat="server" Width="90%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Present Purchase :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtPresPurch" runat="server" Width="89%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Class :
        </td>
        <td class="field" style="width: 10%;">
            <asp:DropDownList ID="ddlClass" runat="server" Width="90%">
                <asp:ListItem Value="1">--Select--</asp:ListItem>
                <asp:ListItem Value="2">Class 1</asp:ListItem>
                <asp:ListItem Value="3">Class 2</asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Status :
        </td>
        <td class="field" style="width: 10%;">
            <asp:DropDownList ID="ddlStatus" runat="server" Width="89%">
                <asp:ListItem Value="1">--Select--</asp:ListItem>
                <asp:ListItem Value="2">Status 1</asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>
</table>

Таблица 2 HTML

<table cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td class="otab">
            Contact Details
        </td>
    </tr>
</table>
<table width="100%" border="0" cellpadding="2px" cellspacing="0">
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Address 1 :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtAddress1" runat="server" Width="80%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Address 2 :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtAddress2" runat="server" Width="80%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 6%; font-family: Courier New; font-size: 120%;">
            Mobile No :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtMobileNo" runat="server" Width="90%"></asp:TextBox>
        </td>
        <td class="label" style="width: 8%; font-family: Courier New; font-size: 120%;">
            Pancard No :
        </td>
        <td class="field" style="width: 10%;">
            <asp:TextBox ID="txtPancardNo" runat="server" Width="90%"></asp:TextBox>
        </td>
    </tr>
</table>

Я попытался установить ширину и высоту тд, но это не так, как я хотел. Я хочу установить его в соответствии с дизайном таблицы 1

Обновить

Моя JS скрипка здесь

Автор: B N Источник Размещён: 08.11.2019 11:16

Ответы (3)


1 плюс

Решение

Теперь у вас есть 4 столбца в строке таблицы. Общая ширина строки теперь составляет: 6% + 10% + 8% + 10% = 34%, когда она должна составлять 100%.

Так что отредактируйте свой код и удалите встроенные стили tdэлементов и создайте css, например:

.label {
  width: 20%;
}

.field {
  width: 30%;
}

тогда две метки + поле = 4 столбца составят 100% ширины.

Автор: Hardy Размещён: 20.08.2016 11:55

0 плюса

Я обновил на https: // jsfiddle (точка) net / unpy10vq / 6 / Пожалуйста, проверьте, надеюсь, это поможет вам

Автор: kumarsher45 Размещён: 20.08.2016 12:15

0 плюса

Вы можете попробовать этот код

<style>
    .main-info div,
    .contact-detail div{
        width: 50%;
        height: 40px;
        float: left;
        padding: 5px 20px;
        box-sizing: border-box;
    }
    .main-info div label,
    .main-info div input,
    .main-info div select,
    .contact-detail div label,
    .contact-detail div input,
    .contact-detail div select{
        width: 50%;
        float: left;
        display: inline-block;
    }
</style>

<div>
    <h3>Main Information</h3>
    <div class="main-info">
        <div>
            <label for="ddlProject">Project :</label>
            <select name="ddlProject" id="ddlProject">
                <option value="1">--Select--</option>
                <option value="2">Hubtown project 1</option>
                <option value="3">Hubtown project 2</option>
            </select>
        </div>
        <div>
            <label for="txtlegalEnt">Legal Entity :</label>
            <input name="txtlegalEnt" type="text" readonly="readonly" id="txtlegalEnt" />
        </div>
        <div>
            <label for="txtVillage">Village :</label>
            <input name="txtVillage" type="text" id="txtVillage"/>
        </div>
        <div>
            <label for="txtTaluka">Taluka :</label>
            <input name="txtTaluka" type="text" id="txtTaluka" />
        </div>
        <div>
            <label for="txtSurvey">Survey No :</label>
            <input name="txtSurvey" type="text" id="txtSurvey"/>
        </div>
        <div>
            <label for="txtHissa">Hissa No :</label>
            <input name="txtHissa" type="text" id="txtHissa" />
        </div>
        <div>
            <label for="txtArea">Area(Hectares) :</label>
            <input name="txtArea" type="text" id="txtArea"/>
        </div>
        <div>
            <label for="txtGuntha">Area(Guntha) :</label>
            <input name="txtGuntha" type="text" id="txtGuntha" />
        </div>
        <div>
            <label for="txtPresPurch">Present Purchase :</label>
            <input name="txtPresPurch" type="text" id="txtPresPurch"/>
        </div>
        <div>
            <label for="ddlClass">Class :</label>
            <select name="ddlClass" id="ddlClass">
                <option value="1">--Select--</option>
                <option value="2">Class 1</option>
                <option value="3">Class 2</option>
            </select>
        </div>
        <div>
            <label for="ddlStatus">Status :</label>
            <select name="ddlStatus" id="ddlStatus">
                <option value="1">--Select--</option>
                <option value="2">Status 1</option>

            </select>
        </div>
    </div>
    <h3 style="clear: both;">Contact Details</h3>
    <div class="contact-detail">
        <div>
            <label for="txtAddress1">Address 1:</label>
            <input name="txtAddress1" type="text" id="txtAddress1"/>
        </div>
        <div>
            <label for="txtAddress2">Address 2:</label>
            <input name="txtAddress2" type="text" id="txtAddress2"/>
        </div>
        <div>
            <label for="txtMobileNo">Mobile No :</label>
            <input name="txtMobileNo" type="text" id="txtMobileNo"/>
        </div>
        <div>
            <label for="txtPancardNo">Pancard No :</label>
            <input name="txtPancardNo" type="text" id="txtPancardNo"/>
        </div>
    </div>
</div>
Автор: kumarsher45 Размещён: 22.08.2016 09:29
Вопросы из категории :
32x32