I'm not very familiar with HTML and CSS, and I've come across a problem. Here is the CSS structure in question:
<!-- TECHNICAL REFERENCE: -->
<div id="referenteTecnicoTab">
<table width="800px" class="standard-table-cls table-header-cls">
<thead class="opening">
<tr>
<th>
<img class="imgAccordion" src="img/arrow.gif"/>
Invoice Search
</th>
</tr>
</thead>
<tbody class="expanded" style="display: none;">
<tr>
<td>
<div id="ricercaFattureContent" class="accordion-pane-content">
<table width="100%" class="standard-table-cls table-header-cls" >
<thead>
<tr>
<th style="text-align: center; border-left: 0">Invoice Search</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100%">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Within the id=ricercaFattureContent div, there's a table with a thead displaying the text "Invoice Search" and a tbody showing the example text "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa."
The issue is that the table's width matches the content inside it (in this case, the "aaa....aaa" text).
How can I make the table have the same width as its container?
I've been struggling to figure it out, and through FireBug, it appears that the tr within the tbody takes on the width determined by its content. This portion of the code explains it:
<table class="standard-table-cls table-header-cls" width="100%">
<thead class="opening active">
<tbody class="expanded" style="display: block;">
<tr>
THE tr TAKE THE WIDTH OF ITS CONTENT
As a result, I end up with something like this:
I want the table to match the width of its container. Any suggestions?
Thanks