我正在寻找一个纯CSS解决方案，以使表以以下方式运行：
- 如果内容
- 表格应始终填充其容器的宽度，单元格水平分布
- 如果表的内容比容器的宽度宽，则该表应水平滚动
如果我使用
table {
width: 100%
}
无论我是否使用，它都适用于内容比内容宽度短的表
table {
width: 100%;
display: block;
overflow: auto;
}
将适用于内容大于内容宽度的表。有没有一种方法可以让桌子在两种情况下都能正常工作？
我希望通过一个例子更容易理解：
body {
font-family: sans-serif
}
h3 {
margin-top: 30px;
}
p {
font-style: italic;
margin-top: 4px;
}
div#container {
width: 600px;
border: 2px solid blue;
padding: 20px;
overflow: hidden;
}
table {
border: 1px solid red;
}
thead {
background-color: #ddd;
}
td {
padding: 5px;
}
table.fullwidth {
width: 100%;
}
table.displayblock {
width: 100%;
display: block;
overflow: auto;
}
table::-webkit-scrollbar {
-webkit-appearance: none;
}
table::-webkit-scrollbar:horizontal {
height: 11px;
}
table::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .5);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<table class="fullwidth">
<thead>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>short</td>
<td>table</td>
</tr>
</tbody>
</table>
<p>Tables with short contents shoould behave like this.</p>
<table class="displayblock">
<thead>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
</thead>
<tr>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
</tr>
</table>
<p>Tables with long contents should behave like this.</p>
</div>
</body>
</html>在这个例子中，我使用了两种不同的风格。仅仅用一种风格就能获得同样的效果吗？
谢谢！
我修复了您的html，因为您对每行使用单独的表，而不是使用标准表TR代表表行
然后我使用flex box来定位和对齐盒子里的项目。
如果你想为移动预定义，你必须使用媒体查询
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
h3 {
margin-bottom: 0;
}
#container {
width: 90vw;
border: 2px solid blue;
overflow: hidden;
/*position container in the middle of page*/
margin: 0 auto;
}
table {
/*position center*/
margin: 0 auto;
border: 2px solid red;
padding: 2.5vh 3vw;
width: 84vw; /*container width - padding*/
}
tr {
width: 100%;
height: 5vh;
display: flex;
justify-content: space-between;
border: 2.5px solid black;
}
td {
/*width 33% of parent*/
width: 100%;
/*center text in box*/
display: flex;
justify-content: center;
align-items: center;
/*fit inside box*/
word-break: break-all;
/*see table cells*/
background: #fff333;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=1">
<title></title>
</head>
<body>
<div id="container">
<table>
<tr>
<td>a</td>
<td>short</td>
<td>table</td>
</tr>
<tr>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
</tr>
<tr>
<td>a</td>
<td>short</td>
<td>table</td>
</tr>
<tr>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
</tr>
<tr>
<td>a</td>
<td>short</td>
<td>table</td>
</tr>
<tr>
<td>someverywidetable</td>
<td>someverywidetable</td>
<td>someverywidetable</td>
</tr>
</table>
</div>
</body>
</html>