如何在HTML中更改表格特定的列宽？

时间：2017-05-10 12:14:46

标签： html css

我有下面的表格。我想通过更改其默认宽度来更改特定列宽=＆gt;。以前我已经完成了。但现在在下面的表格中它不适用于我。我不知道为什么。

我想更改我添加宽度的列：400px; 我知道css专家可以帮我解决这个问题。请帮助我。我对css知之甚少。

＆＃13;
＆＃13; 
.namex {
        overflow: scroll;
    }
＆＃13; 
<div class="namex">
    <table class="table">
        <tr>
            <th>
                Full Name
            </th>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Profile Pic
            </th>
            <th style="width:400px;">
                Currently Assigned Courses
            </th>
            <th width="200px">
                Currently Assigned Batches
            </th>
            <th>
                Company Name
            </th>
            <th>
                City
            </th>
            <th>
                Phone Number
            </th>
            <th>
                Email Address
            </th>
            <th>
                Zip Code
            </th>
            <th>
                User Nationality
            </th>
            <th>
                Gender
            </th>
            <th>
                Religion
            </th>
            <th>
                Blood Group
            </th>
            <th>
                Date Of Birth
            </th>
            <th>
                User Activation Date
            </th>
            <th>
                User Current Status
            </th>
            <th></th>
        </tr>

            <tr>
                <td>
                    md.amjad hossain
                </td>
                <td>
                    md.amjad
                </td>
                <td>
                    hossain
                </td>
                <td>
                    <img src="/Content/img/tsms/default/owner.jpg" height="80" width="80" style="border-radius:2px;" />
                </td>
                <td>
                    <select onchange="alert(this.value)" class="form-control input-lg">
                                <option value="CCNA Security">CCNA Security</option>
                                <option value="Oracle Database 12c">Oracle Database 12c</option>

                    </select>
                </td>
                <td>
                    <select onchange="alert(this.value)" class="form-control input-lg">
                                <option value="CCNA Security-1">CCNA Security-1</option>
                                <option value="Oracle Database 12c-1">Oracle Database 12c-1</option>

                    </select>
                </td>
                <td>
                    aiub
                </td>
                <td>
                    dhaka
                </td>
                <td>
                    1830954149
                </td>
                <td>
                    <a href="mailto:nayanchowdhury92@gmail.com">nayanchowdhury92@gmail.com</a>
                </td>
                <td>
                    1362
                </td>
                <td>
                    bangladeshi
                </td>
                <td>
                    male
                </td>
                <td>
                    islam
                </td>
                <td>
                    o+
                </td>
                <td>
                    2/25/1995
                </td>
                <td>
                    5/8/2017
                </td>
                <td>
                    Active
                </td>
                <td>
                    <a href="/Students/Edit/2">Edit</a> |
                    <a href="/Students/Details/2">Details</a> |
                    <a href="/Students/Delete/2">Delete</a>
                </td>
            </tr>
    </table>
</div>

in my case its look like ---

[![Pic of my table][1]][1]
  [1]: https://i.stack.imgur.com/d8Dr0.png

look 
 
        <th style="width:400px;">
            Currently Assigned Courses
        </th>
        <th width="200px">
            Currently Assigned Batches
        </th>

is not working after applying width.its still look like 0px.
thats my problem.
＆＃13;
＆＃13;
＆＃13;

Pic of my table     看看

        <th style="width:400px;">
            Currently Assigned Courses
        </th>
        <th width="200px">
            Currently Assigned Batches
        </th>
应用width后，

无效。仍然看起来像0px。 这就是我的问题。

3 个答案:

答案 0 :(得分：0)

您应该查看colgroup元素。不要在表格标题上指定宽度，而是在col标记上指定所需的大小。

<table>
    <colgroup>
       <col>
       <col style="width: 100px">
       <!-- repeat as many cols as the number of headers -->
    </colgroup>
    <thead>
       <tr>
       <th> Header 1 </th>
           <th> Header 2 </th>
       </tr>
    </thead>
    <tbody>
       <tr>
           <td> DAta 1 </td>
           <td> Data 2 </td>
       </tr>
    </tbody>
</table>

这里如果你没有在col标签中指定任何内容，它将表现为浏览器默认值。 好吧，根据w3schools

  

<col>标记指定元素中每列的列属性。

     

<col>标记对于将样式应用于整个列非常有用，而不是为每一行重复每个单元格的样式。

答案 1 :(得分：0)

你需要设置一个表格宽度，默认情况下，浏览器将表格设置为100％，并尝试适应所有tds，如果你想使用特定的宽度，你还需要设置表格的特定宽度。

.table { width:1000px; }

只需确保宽度足以容纳任何填充，边距或边框+文字。

您为任何td设置的特定宽度不会超过设置的宽度，但如果您不允许足够的总表宽，它仍然可以缩小

答案 2 :(得分：0)

如果要自定义特定列的宽度，可以随时为该列分配一个类，然后通过CSS设置该列的样式。 您还需要使用!important来覆盖已分配给该特定列的任何width属性。有关!important规则的更多信息，请访问：When Using !important is The Right Choice

以下是一个示例，您可以将其用作开始指南。 

.namex {
  overflow: scroll;
}

.table {
  display: table;
  width: 100%;
}

.width-lg {
    width: 400px !important;
}
.width-md {
    width: 200px !important;
}
<div class="namex">
  <table class="table">
    <tr>
      <th>
        Full Name
      </th>
      <th>
        First Name
      </th>
      <th>
        Last Name
      </th>
      <th>
        Profile Pic
      </th>
      <th class="width-lg">
        Currently Assigned Courses
      </th>
      <th class="width-md">
        Currently Assigned Batches
      </th>
      <th>
        Company Name
      </th>
      <th>
        City
      </th>
      <th>
        Phone Number
      </th>
      <th>
        Email Address
      </th>
      <th>
        Zip Code
      </th>
      <th>
        User Nationality
      </th>
      <th>
        Gender
      </th>
      <th>
        Religion
      </th>
      <th>
        Blood Group
      </th>
      <th>
        Date Of Birth
      </th>
      <th>
        User Activation Date
      </th>
      <th>
        User Current Status
      </th>
      <th></th>
    </tr>

    <tr>
      <td>
        md.amjad hossain
      </td>
      <td>
        md.amjad
      </td>
      <td>
        hossain
      </td>
      <td>
        <img src="/Content/img/tsms/default/owner.jpg" height="80" width="80" style="border-radius:2px;" />
      </td>
      <td>
        <select onchange="alert(this.value)" class="form-control input-lg">
                                <option value="CCNA Security">CCNA Security</option>
                                <option value="Oracle Database 12c">Oracle Database 12c</option>

                    </select>
      </td>
      <td>
        <select onchange="alert(this.value)" class="form-control input-lg">
                                <option value="CCNA Security-1">CCNA Security-1</option>
                                <option value="Oracle Database 12c-1">Oracle Database 12c-1</option>

                    </select>
      </td>
      <td>
        aiub
      </td>
      <td>
        dhaka
      </td>
      <td>
        1830954149
      </td>
      <td>
        <a href="mailto:nayanchowdhury92@gmail.com">nayanchowdhury92@gmail.com</a>
      </td>
      <td>
        1362
      </td>
      <td>
        bangladeshi
      </td>
      <td>
        male
      </td>
      <td>
        islam
      </td>
      <td>
        o+
      </td>
      <td>
        2/25/1995
      </td>
      <td>
        5/8/2017
      </td>
      <td>
        Active
      </td>
      <td>
        <a href="/Students/Edit/2">Edit</a> |
        <a href="/Students/Details/2">Details</a> |
        <a href="/Students/Delete/2">Delete</a>
      </td>
    </tr>
  </table>
</div>

相关问题
最新问题