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

回答(14)

2 years ago

我所做的是：

设置td宽度：

用CSS设置td宽度：

使用CSS将宽度再次设置为max和min：

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

}

然后：

将class属性放置到您想要的任何

.

2 years ago

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

HTML：

header 1	header 234567895678657
data asdfasdfasdfasdfasdf	data 2

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小提琴

2 years ago

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

HTML

1	Some text...	May 2018	Edit
2	Another text...	April 2018	Edit

CSS

table {

width: 600px;

border-collapse: collapse;

}

td {

border: 1px solid #999999;

}

View Result

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

2 years ago

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

2 years ago

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

table-layout:fixed;

2 years ago

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

例如，如果您有三列：

...

2 years ago

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

th.first-col > div,

td.first-col > div {

overflow:hidden;

white-space:nowrap;

width:100px

}

really long header

really long text

2 years ago

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

2 years ago

我用过这个

.app_downloads_table tr td:first-child {

width: 75%;

}

.app_downloads_table tr td:last-child {

text-align: center;

}

2 years ago

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

...............

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

2 years ago

只需在

中添加

标签或在

内添加 定义宽度 . 这对你有所帮助 . 没有别的办法 .

例如 .

...............

2 years ago

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

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

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

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

HTML：

header 1	header 234567895678657
data asdfasdfasdfasdfasdf	data 2

CSS：

table{

border: 1px solid black;

table-layout: fixed;

width: 200px;

}

th, td {

border: 1px solid black;

width: 100px;

}

2 years ago

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

2 years ago

如果您不想要固定布局，请为该列指定一个适当大小的类 .

CSS：

.special_column { width: 120px; }

HTML：

...