2

テーブルを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>
4

5 に答える 5

3

この例を見てください：

<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ます。テーブルの赤と黒に注意してください。

于 2012-04-22T01:21:25.273 に答える
2 
div.flist{width:500px;}
div.flist table{width:100%;}
于 2012-04-22T01:20:02.137 に答える
1

ほとんどの場合、これでうまくいくはずです。モバイルが必要な場合は、代わりにメディア クエリを使用してください。各辺に 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>
于 2012-04-22T02:36:00.353 に答える
-1

これは効いたかも

これも 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>
于 2012-04-22T15:37:55.563 に答える