Menu
I have 2 tables one on top of the other and I would like to align their column widths exactly with each other, is there a way to do this? Tried fixed table col widths etc no joy
You can see on fiddle the columns are slightly off each other http://jsfiddle.net/askhe/
HTML
<table class="tblresults txtblack">
<tr class="tblresultshdr bold">
<td class="col1">Company</td>
<td>Currency</td>
<td>Bid</td>
<td>Ask</td>
<td>YTD Vol</td>
</tr>
<tr>
<td class="col1">ABC</td>
<td>GBP</td>
<td>94</td>
<td>16</td>
<td>3,567,900</td>
</tr>
<tr>
<td class="col1">DEF</td>
<td>GBP</td>
<td>3</td>
<td>46</td>
<td>10,000</td>
</tr>
<tr>
<td class="col1">GHI</td>
<td>GBP</td>
<td>3</td>
<td>46</td>
<td>10,000</td>
</tr>
<tr>
<td class="col1">JKLM</td>
<td>GBP </td>
<td>7</td>
<td>46</td>
<td>56,000</td>
</tr>
</table>
<table class="tblresults txtblack margintop10">
<tr>
<td colspan="5" class="bold" >Investments</td>
</tr>
<tr>
<td class="col1">ghjk</td>
<td>GBP</td>
<td>13</td>
<td>6</td>
<td>130,000</td>
</tr>
<tr>
<td class="col1">asdsa</td>
<td>GBP</td>
<td>120</td>
<td>46</td>
<td>16,000</td>
</tr>
<tr>
<td class="col1">dfdsfsdf </td>
<td>GBP</td>
<td>1</td>
<td>4</td>
<td>13,000</td>
</tr>
</table>
CSS
table.tblresults {
width:100%;
*width:99.5%;
border: 1px solid #b9b8b8;
top: 0;
}
table.tblresults tr.tblresultshdr {background: lightgrey;}
table.tblresults tr.tblresultshdr td {padding: 6px;}
table.tblresults td {padding: 8px; border: 1px solid #b9b8b8;}
table.tblresults td.col1 {width: 70%;}
677
Change column and row widthSelect the boundary of the column or row you want to move and drag it to the width or height you want. Select the rows or columns and then select Layout and choose your height and width. Select View > Ruler checkbox, select the cell you want, and then drag the markers on the ruler.
Changing the text alignment in a table column. Select the table chart, click in the corner of a table column, and then click in the column formatting bar until you reach the desired alignment. The control shows the alignment you are about to set. Click to center the text.
Select your table. On the Layout tab, in the Cell Size group, click AutoFit. Click Fixed Column Width.
Using table-layout: fixed as a property for table and width: calc(100%/3); for td (assuming there are 3 td 's). With these two properties set, the table cells will be equal in size.
No need to merge tables, you can use this
table-layout: fixed;
There is a wonderful article here about it https://css-tricks.com/fixing-tables-long-strings/
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
