Hello, I have a webpage that dynamically displays various tables with different data sets. The issue I'm facing is that some columns do not have data, causing the tables to display at varying widths. This inconsistency in width is aesthetically unpleasing and I would like all tables to be the same width. Is there a way to achieve this using CSS without having to resort to setting pixel values for widths? Below is my current CSS code:
table.motionEventsTable {
margin: 0 auto;
width:90%;
word-wrap:break-word;
}
table.motionEventsTable td:nth-child(1){width:18%;} /* first column */
table.motionEventsTable td:nth-child(2){width:15%;} /* second column */
table.motionEventsTable td:nth-child(3){max-width:15%; word-wrap:break-word;} /* third column */
table.motionEventsTable td:nth-child(4){width:22%;} /* fourth column */
table.motionEventsTable td:nth-child(5){width:30%;} /* fifth column */ <table id="motionsTable" summary="This table is an index of all papers">
<thead>
<tr>
<!--<th> </th> -->
<th scope="col">Task </th>
<th scope="col">Event</th>
<th scope="col">Date</th>
<th scope="col">Person</th>
<th scope="col">Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>lkdjf dpfj dlkfkhg pldfjk;l</td>
<td>ojkdfh dsfkjh</td>
<td>August 29, 2013</td>
<td>
August 29, 2013 jlkfdj</td>
<td>James Bradley gfhf;lmk fglkjm ;ldf;ljgk ;dlfjkgd</td>
</tr>
<tr>
<td>fgh</td>
<td>fghfg</td>
<td>August 29, 20136 787899 990 000</td>
<td>
August 29, 2013
</td>
<td>James Bradley</td>
</tr>
<tr>
<td>fghgfn</td>
<td>fghfg</td>
<td>August 29, 2013</td>
<td>
August 29, 2013
</td>
<td>James Bradley</td>
</tr>
<tr>
<td>August 29, 2013</td>
<td>fghfg</td>
<td>August 22, 2013</td>
<td>
James Bradley
</td>
<td>n/a</td>
</tr>
<tr>
<td>fghfgh</td>
<td>gfhfh</td>
<td>August 29, 2013</td>
<td>
James Bradley
</td>
<td>n/a</td>
</tr>
</tbody>
</table>