user2423959
Reputation: 834
table row is now getting within the boundary
I've a table with some rowspans and colspans. here when i'm applying the css the last column is going out of the boundary.
my HTML code is
<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>
the css applied can be found in this fiddle, please let me know where am i going wrong. You can see the last column when you extend the html window in fiddle.
I'm missing the border, highlighted int he screenshot and the last column is kicked out of the table. 
Thanks
Upvotes: 0
Views: 122
Answers (3)
Falguni Panchal
Reputation: 8981
Like this
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>
Upvotes: 1
Nitesh
Reputation: 15739
Here you go.
The Code:
<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>
Hope this helps.
Upvotes: 0
NoobEditor
Reputation: 15871
Add table-layout: fixed to your table css....that is missing!!
do this :
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 */
}
Upvotes: 0
Related Questions
- Table going out of div
- Table width goes beyond the div border
- Table borders are going out of bound on right side
- HTML Border Appearing Outside of Cell
- Border in table exceeds row
- HTML/CSS: Table getting out of a cell. Is it normal? How to fix?
- td { position:relative; } overflows into the table border
- Table leaving element bounds
- table data going outside borders
- Table content going outside div