Question

我正试图让一张桌子成为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>&nbsp;</td>
</tr>
</table>    
 </div>

Answer 1

举个例子：

<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>&nbsp;</td>
</tr>
</table>    
 </div>
</body>
</html>

只是一个内联css示例，但如果您更改表格宽度更改.flist宽度，则会有效，请注意.flist与表格黑色的红色。

Answer 2

div.flist{width:500px;}
div.flist table{width:100%;}

Answer 3

这在大多数情况下都适用。如果您需要移动设备，请改用媒体查询。每边加1％是= 20px所以只是减去表宽度。 1％= 10px;

*{
  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>

Answer 4

像这样写表格标签

<table width=100%></table>

Answer 5

这可能有效

也将此添加到表格中风格= “表格的布局：固定的”

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

表不是100％的Div元素宽度

5 个答案: