无论单元格中的文本数量是多少,都将表格列宽设置为常量？

Question

在我的表中,我将列中第一个单元格的宽度设置为100px.
但是,当此列中某个单元格中的文本太长时,列的宽度会变得更大100px.我怎么能禁用这个扩展？

Answer 1

我玩了一会儿,因为我很难搞清楚.

您需要设置单元格宽度(th或td工作,我设置两者)并设置th为td.出于某种原因,如果设置了表格宽度,单元格宽度似乎只保持固定(我认为这很愚蠢但是whatev).将overflow属性设置为hidden也很有用.

你应该确保留下CSS的所有边界和大小.

好的,这就是我所拥有的.

HTML:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

CSS:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

这是JSFiddle

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

Answer 2

请参阅:http: //www.html5-tutorials.org/tables/changing-column-width/

在表标记之后,使用col元素.你不需要结束标签.

例如,如果您有三列:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Answer 3

只需在<div>里面添加标签<td>或在里面<th>定义宽度<div>.这会对你有所帮助.没有别的办法.

例如.

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

Answer 4

如果你需要一个或多个固定宽度的列,而其他列应该调整,尝试设置都min-width与max-width相同的值.

Answer 5

你需要在相应的CSS里面写这个

table-layout:fixed;

Answer 6

我所做的是:

1. 设置td宽度:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>
   

2. 使用CSS设置td宽度:

   <td style="width:200px; height:50px;">
   

3. 使用CSS将宽度再次设置为max和min:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
   

它听起来有点重复,但它给了我想要的结果.要轻松实现这一点,您可能需要将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>您想要的任何属性.

Answer 7

设置这个：

style="min-width:100px;" 

为我工作。