在我的表格中,我设置列中第一个单元格的宽度为100px。 但是,当此列中的某个单元格中的文本太长时,列的宽度就会超过100px。如何禁用此扩展?


当前回答

只需在<td>或<th>定义宽度<div>内添加<div>标签。 这对你有帮助。别的都不管用。

eg.

<td><div style="width: 50px" >...............</div></td>

其他回答

如果不想要固定的布局,请指定一个类,使列的大小适当。

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

根据我在这里的回答,也可以使用一个表头(可以是空的),并为每个表头单元应用相对宽度。表体中所有单元格的宽度将与其列头的宽度一致。例子:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

查看结果

或者,按照Hyathin的回答建议使用colgroup。

我玩了一会儿,因为我搞不懂。

你需要设置单元格宽度(th或td工作,我设置两者)和设置表格布局固定。出于某种原因,单元格宽度似乎只有在设置表宽度时才会保持固定(我认为这很愚蠢,但无所谓)。

此外,将overflow属性设置为hidden也很有用,可以防止任何额外的文本从表中输出。

你也应该确保所有的边界和大小都留给CSS。

好了,这是我得到的:

表{ 边框:1px纯黑色; 表布局:固定; 宽度:200 px; } th, td { 边框:1px纯黑色; 宽度:100 px; 溢出:隐藏; } <表> < tr > < th >头1 < / th > < th >头234567895678657 < / th > < / tr > < tr > < td >数据asdfasdfasdfasdfasdf td > < / < td >数据2道明> < / < / tr > 表> < /

在JSFiddle中

这个家伙有一个类似的问题:表单元格宽度-固定宽度,换行/截断长单词

我所做的是:

设置td宽度: <td width="200" height="50"><!——blaBlaBla这里的内容——></td> . txt 使用CSS设置td宽度: < td风格= "宽度:200 px;高度:50 px;" > 用CSS再次设置宽度为max和min: < td风格= " max-width: 200 px;min-width: 200 px;max-height: 50 px;最小高度:50 px;宽度:200 px;高度:50 px;" >

这听起来有点重复,但它给了我想要的结果。为了更容易地实现这一点,你可能需要把CSS值放在样式表中的一个类中:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

然后:

<td class="td_size">

将class属性放置到任何<td>。

如果对表的访问受限,那么使用类或内联样式可能会比较复杂。

或者你也可以瞄准每一行的第一个td和第th个子元素(也就是第一列)

当我用width测试它时,下面的规则对我有用,但由于某种原因,max-width不适用:

thead, tbody tr {
            
    display:table;
    width:100%;
    table-layout:fixed;
}

tr th:first-child, tr td:first-child {
                
    width:100px;
}