无论单元格中的文本数量是多少，都将表格列宽度设置为常量？-Java 学习之路

455

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

14 回答

2

使用 width:auto 将最后的"filler cell"放入其中也很有帮助 . 这将占用剩余空间，并将保留指定的所有其他尺寸 .

回复于 2024-05-14T03:35:32+08:00
0
如果您不想要固定布局，请为该列指定一个适当大小的类 .

CSS：
```
.special_column { width: 120px; }
```
HTML：
```
<td class="special_column">...</td>
```
回复于 2024-05-14T03:35:32+08:00

533

我所做的是：

设置td宽度：

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

用CSS设置td宽度：

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

使用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> .

回复于 2024-05-14T03:35:32+08:00

当小于固定宽度时，使接受的答案响应小屏幕 .

HTML：

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

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

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

JS小提琴

https://jsfiddle.net/w9s3ebzt/

回复于 2024-05-14T03:35:32+08:00

120

根据我的回答here，也可以使用 table head （可以为空）并为每个表头单元格应用相对宽度 . 表体中所有单元格的宽度将与其列头的宽度一致 . 例：

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;
}

View Result

或者，按照Hyathin的回答中的建议使用 colgroup .

回复于 2024-05-14T03:35:32+08:00

1

如果您需要一个或多个固定宽度列，而其他列应调整大小，请尝试将 min-width 和 max-width 设置为相同的值 .

回复于 2024-05-14T03:35:32+08:00
2
你需要在相应的CSS里面写这个
```
table-layout:fixed;
```
回复于 2024-05-14T03:35:32+08:00
28
见：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>
```
回复于 2024-05-14T03:35:32+08:00

KAsun有正确的想法 . 这是正确的代码......

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

回复于 2024-05-14T03:35:32+08:00

134

您不需要设置 "fixed" - 您需要设置 overflow:hidden ，因为列宽已设置 .

回复于 2024-05-14T03:35:32+08:00

-5

我用过这个

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

回复于 2024-05-14T03:35:32+08:00

-2

我发现KAsun的答案更好用 vw 而不是 px ，如下所示：

<td><div style="width: 10vw" >...............</div></td>

这是我需要调整列宽的唯一样式

回复于 2024-05-14T03:35:32+08:00
60
只需在 <td> 中添加 <div> 标签或在 <div> 内添加 <th> 定义宽度 . 这对你有所帮助 . 没有别的办法 .

例如 .
```
<td><div style="width: 50px" >...............</div></td>
```
回复于 2024-05-14T03:35:32+08:00
1
我玩了一会儿，因为我很难搞清楚它 .

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

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

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

HTML：
```
<table>
   <tr>
      <th>header 1</th>
      <th>header 234567895678657</th>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
   </tr>
</table>
```
CSS：
```
table{
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

th, td {
    border: 1px solid black;
    width: 100px;
}
```
Here it is in JSFiddle

这家伙有类似的问题：Table cell widths - fixing width, wrapping/truncating long words
回复于 2024-05-14T03:35:32+08:00

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

14 回答

相关问题