我正在尝试让表格的宽度为 div 的 100%...
但是当我使用 width=100% 时，它会扩展到边界之外……在不同的设备上使用时……
所以我只是喜欢这张桌子，全宽 - 并且 N/A 按钮右对齐......
似乎它总是在不同的设备上超越边界......
<div class=flist>
<table cellpadding=2 border=1>
<tr>
<td valign=middle>
<img src="images/plus.png" height=14 width=14 border=0 align=middle> <b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
举个例子：
<html>
<body>
<head>
<style>
.flist{
border:1px solid red;
padding:5px;
width:500px;
}
table{
width:100%;
border:1px solid;
}
</style>
</head>
<div class="flist">
<table cellpadding="2" border="1">
<tr>
<td valign=middle>
<b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
只是一个内联 css 示例，但如果您更改.flist表格宽度更改宽度，它会起作用，请注意表格的红色.flist与黑色。
div.flist{width:500px;}
div.flist table{width:100%;}
这在大多数情况下应该有效。如果您需要移动设备，请改用媒体查询。每边添加 1% = 20px，所以只需减去表格宽度。1% = 10 像素；
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
table{
width: 100%;
border-spacing: 0;
border-collapse: collapse;
empty-cells:show;
}
table.bordered{
border-collapse:separate;
border:1px solid #ccc;
border-radius:4px;
}
th,td{
vertical-align:top;
padding:0.5em;
}
tr:nth-child(2n){
background-color:#f5f5f5;
}
-
<table class="bordered">
<tbody></tbody>
</table>
像这样写表标签
<table width=100%></table>
这可能有效
将此也添加到 table style="table-layout:fixed"
.flist {
font-family: Verdana; font-size: 13pt; font-weight: bold;
overflow: hidden;
position: relative;
background-color: #e9e9e9;
padding: 5px;
margin-top: 5px;
margin-left: 1%;
margin-right: 1%;
border: 1px solid #000;
}
.flist > table
{
width: 100%;
}
<div class=flist>
<table cellpadding=2 border=0 style="table-layout:fixed">
<tr>
<td valign=middle>
<b>General</b>
</td>
<td align=right>input type="button" name="CheckAll" value="All N/A" class=verd8></td>
</tr>
</table>
</div>