表行现在进入边界内
我有一张桌子，上面有一些行和粉饼。在这里，当我使用css时，最后一列正在走出边界。
我的HTML代码是
<table class="frame_PD-all">
<colgroup>
<col class="colnum-1 colname-col1 colwidth-4"></col><col class="colnum-2 colname-col2 colwidth-4"></col><col class="colnum-3 colname-col3 colwidth-7"></col><col class="colnum-4 colname-col4 colwidth-4"></col><col class="colnum-5 colname-col5 colwidth-7"></col><col class="colnum-6 colname-col6 colwidth-10"></col><col class="colnum-7 colname-col7 colwidth-6"></col><col class="colnum-8 colname-col8 colwidth-6"></col><col class="colnum-9 colname-col9 colwidth-6"></col><col class="colnum-10 colname-col10 colwidth-6"></col><col class="colnum-11 colname-col11 colwidth-6"></col><col class="colnum-12 colname-col12 colwidth-6"></col><col class="colnum-13 colname-col13 colwidth-6"></col><col class="colnum-14 colname-col14 colwidth-6"></col><col class="colnum-15 colname-col15 colwidth-6"></col><col class="colnum-16 colname-col16 colwidth-10"></col></colgroup>
<thead>
<tr>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">BIL</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">NO. KES</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">NAMA PEMBELI</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">NO. K/P</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">ALAMAT PEMBELI</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH LELONGAN</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH LUPUT</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">HARGA RIZAB</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">HARGA JUALAN</span>
</div>
</td>
<th class="align-center" valign="top" colspan="3">
<div class="para">
<span class="font-style-bold">DEPOSIT 10% HARGA RIZAB</span>
</div>
</th>
<th class="align-center" valign="top" colspan="3">
<div class="para">
<span class="font-style-bold">BAKI HARGA BELIAN</span>
</div>
</th>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH PENERIMAAN PENYATA AKAUN (S.268(A)) KTN</span>
</div>
</td>
</tr>
<tr>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">NO RESIT</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">JUMLAH</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">NO RESIT</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">JUMLAH</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left" valign="top">
<div class="para">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
</tr>
</tbody>
</table>
应用的css可以在fiddle中找到，请告诉我哪里出错了。当您在小提琴中扩展html窗口时，可以看到最后一列。
我错过了边框，在屏幕截图中突出显示，最后一列被踢出了桌子。 
由于
3 个答案:
答案 0 :(得分：1)
喜欢这个
<强> demo
<强> HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" align="center"><span class="font-style-bold">BIL</span></td>
<td rowspan="2" align="center"><span class="font-style-bold">KES</span></td>
<td rowspan="2" align="center"><span class="font-style-bold">NAMA PEMBELI</span></td>
<td rowspan="2" align="center"><span class="font-style-bold">NO. K/P</span></td>
<td rowspan="2" align="center"><span class="para"><span class="font-style-bold">ALAMAT PEMBELI</span> </span></td>
<td rowspan="2" align="center"><span class="para"><span class="font-style-bold">TARIKH LELONGAN</span> </span></td>
<td rowspan="2" align="center"><span class="font-style-bold">TARIKH LUPUT</span></td>
<td colspan="3" align="center"><span class="font-style-bold">DEPOSIT 10% HARGA RIZAB</span></td>
<td colspan="3" align="center"><span class="para"><span class="font-style-bold">BAKI HARGA BELIAN</span></span></td>
<td rowspan="2" align="center"><span class="font-style-bold">TARIKH PENERIMAAN PENYATA AKAUN (S.268(A)) KTN</span></td>
</tr>
<tr>
<td align="center"><span class="font-style-bold">TARIKH</span></td>
<td align="center"><span class="para"><span class="font-style-bold">NO RESIT</span></span></td>
<td align="center"><span class="font-style-bold">JUMLAH</span></td>
<td align="center"><span class="font-style-bold">TARIKH</span></td>
<td align="center"><span class="font-style-bold">NO RESIT</span></td>
<td align="center"><span class="font-style-bold">JUMLAH</span></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
答案 1 :(得分：0)
将table-layout: fixed添加到您的表css ....缺少!!
这样做：
table.frame_PD-all {
width:100%;
border-collapse:collapse;
border: 0.080em solid;
margin-top:1em;
table-layout: fixed; /* added to solve your main problem */
word-break:break-all;/* added so that words can wrap inside the boundry */
}
答案 2 :(得分：0)
你走了。
<强> WORKING DEMO
守则：
<table class="frame_PD-all">
<colgroup>
<col class="colnum-1 colname-col1 colwidth-4"></col><col class="colnum-2 colname-col2 colwidth-4"></col><col class="colnum-3 colname-col3 colwidth-7"></col><col class="colnum-4 colname-col4 colwidth-4"></col><col class="colnum-5 colname-col5 colwidth-7"></col><col class="colnum-6 colname-col6 colwidth-10"></col><col class="colnum-7 colname-col7 colwidth-6"></col><col class="colnum-8 colname-col8 colwidth-6"></col><col class="colnum-9 colname-col9 colwidth-6"></col><col class="colnum-10 colname-col10 colwidth-6"></col><col class="colnum-11 colname-col11 colwidth-6"></col><col class="colnum-12 colname-col12 colwidth-6"></col><col class="colnum-13 colname-col13 colwidth-6"></col><col class="colnum-14 colname-col14 colwidth-6"></col><col class="colnum-15 colname-col15 colwidth-6"></col><col class="colnum-16 colname-col16 colwidth-10"></col></colgroup>
<thead>
<tr>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">BIL</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">NO. KES</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">NAMA PEMBELI</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">NO. K/P</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">ALAMAT PEMBELI</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH LELONGAN</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH LUPUT</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">HARGA RIZAB</span>
</div>
</td>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">HARGA JUALAN</span>
</div>
</td>
<th class="align-center" valign="top" colspan="3">
<div class="para">
<span class="font-style-bold">DEPOSIT 10% HARGA RIZAB</span>
</div>
</th>
<th class="align-center" valign="top" colspan="3">
<div class="para">
<span class="font-style-bold">BAKI HARGA BELIAN</span>
</div>
</th>
<td class="align-center" rowspan="2" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH PENERIMAAN PENYATA AKAUN (S.268(A)) KTN</span>
</div>
</td>
</tr>
<tr>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">NO RESIT</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">JUMLAH</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">TARIKH</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">NO RESIT</span>
</div>
</th>
<th class="align-center" valign="top">
<div class="para">
<span class="font-style-bold">JUMLAH</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left" valign="top">
<div class="para">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
<td class="align-left" valign="top">
<div class="para"></div>
</td>
</tr>
</tbody>
</table>
希望这有帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？