user450143
Reputation: 435
Tables - how to make it fit correctly
On a ASP web page, I have a table with 2 sections. The columns have controls - text, label, textbox, label & label respectively. I want the columns to just take up only space that is required. Have not set any widths.
Here's an image of my table:
I want the 1st 4 columns to line up. That’s working 5th Column – Section 2 has text that is long, So Section 1 column 5 also becomes wide.
I have used tbody for each section.
I tried following: broke Section-1 5th column into 2 columns. Section-2 will have colspan=2. But still, Section-1 5th column is not taking only required space. How do I achieve this?
This is driving me crazy. How does one design tables easily? Do you have any tools that can help this kind of tables? Any suggestions is much appreciated.
Upvotes: 2
Views: 604
Answers (4)
James Khoury
Reputation: 22319
You have to specify widths of some sort otherwise all cells are equal.
I would go with a solution that has <colgroup/> and <col /> elements. That way you can have multiple tables and just have identical <colgroups>.
Table 1: http://jsfiddle.net/XwvTj/2/
<table>
<colgroup>
<col class="regular" />
<col class="extended" />
<col class="regular" />
<col class="regular" />
</colgroup>
<colgroup>
<col />
<col />
<col class="regular" />
<col class="extended" />
<col class="regular" />
</colgroup>
<thead>
<tr class="section">
<th colspan="9">Section 1</th>
</tr>
<tr class="title">
<th>Item</th>
<th>Description</th>
<th>Unit</th>
<th>Unit Price</th>
<th>Total Cost</th>
<th colspan="4">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td colspan="4">6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td colspan="4">6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td colspan="4">6</td>
</tr>
</tbody>
<thead>
<tr class="section">
<th colspan="6">Section 2</th>
<th colspan="3">Section 3</th>
</tr>
<tr class="title">
<th>Item</th>
<th>Description</th>
<th>Unit</th>
<th>Unit Price</th>
<th colspan="2">Notes</th>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
Unfortunately this means setting specific widths and needing colspan="#"
Another suggestion: (my preference): http://jsfiddle.net/XwvTj/1/
<table>
<colgroup>
<col class="regular" />
<col class="extended" />
<col class="regular" />
<col class="regular" />
</colgroup>
<colgroup>
<col class="regular"/>
<col />
</colgroup>
<thead>
<tr class="section">
<th colspan="6">Section 1</th>
</tr>
<tr class="title">
<th>Item</th>
<th>Description</th>
<th>Unit</th>
<th>Unit Price</th>
<th>Total Cost</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<table>
<colgroup>
<col class="regular" />
<col class="extended" />
<col class="regular" />
<col class="regular" />
</colgroup>
<colgroup>
<col />
<col class="regular" />
<col class="extended" />
<col class="regular" />
</colgroup>
<thead>
<tr class="section">
<th colspan="5">Section 2</th>
<th colspan="3">Section 3</th>
</tr>
<tr class="title">
<th>Item</th>
<th>Description</th>
<th>Unit</th>
<th>Unit Price</th>
<th>Notes</th>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
This means there is no more colspan="#"
css for both:
table
{
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table td, table th
{
border: 1px solid black;
}
tr.section th
{
text-align: left;
}
tr.title th
{
vertical-align: top;
}
col.regular
{
width: 9%
}
col.extended
{
width: 17%;
}
Upvotes: 1
user450143
Reputation: 435
I used your code & added a few labels. The problem I talked about the 5th column shown in the attcached image.
See the resulting web page: http://img855.imageshack.us/img855/1781/table2a.jpg
I moved & merged some columns. Here's what I cam up with: http://img651.imageshack.us/img651/3738/table3z.jpg
Is this the best I can do with the tables? or someone can suggest a better approach
<table align = "left" border= "2">
<tr>
<td colspan="10">
Section 1
</td>
<td>
</td>
</tr>
<tr>
<td>
Item
</td>
<td>
Description
</td>
<td>
Unit
</td>
<td>
Unit<br />
Cost
</td>
<td>
Total<br />
Cost
</td>
<td>
Notes
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<asp:Label ID="lblFixedAnnual6" runat="server">123456</asp:Label>
</td>
<td>
<asp:Label ID="lblFixedNotes6" runat="server">This is a long long text. This is a long long text. This is a long long text. This is a long long text. This is a long long text. This is a long long text. </asp:Label>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td colspan="7">
Section-2
</td>
<td colspan="3">
Section-3
</td>
<td>
</td>
</tr>
<tr>
<td>
Item
</td>
<td>
Description
</td>
<td>
Unit
</td>
<td>
Unit<br />
Cost
</td>
<td colspan="3">
Notes
</td>
<td>
Item
</td>
<td>
Description
</td>
<td>
Unit<br />
Cost
</td>
<td>
</td>
</tr>
<tr>
<td>
1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
<asp:Label ID="lblEventNotes6" runat="server">This will be long text as well</asp:Label>
</td>
<td>
1</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
2</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
3</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
4</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
5 </td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
Upvotes: 0
Chains
Reputation: 13157
<table>
<tr>
<td colspan="9">Section 1</td>
</tr>
<tr>
<td>Item</td>
<td>Description</td>
<td>Unit</td>
<td>Unit<br/>Cost</td>
<td>Total<br/>Cost</td>
<td colspan="4">Notes</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="6">Section-2</td>
<td colspan="3">Section-3</td>
</tr>
<tr>
<td>Item</td>
<td>Description</td>
<td>Unit</td>
<td>Unit<br/>Cost</td>
<td colspan="2">Notes</td>
<td>Item</td>
<td>Description</td>
<td>Unit<br/>Cost</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Upvotes: 1
Shankaranarayana
Reputation: 583
place section 1 and Section 2 under separate tables and place these tables inside the main table.
<table>
<tr>
<td>
Section 1
</td>
</tr>
<tr>
<td>
Section 2
</td>
</tr>
</table>
Upvotes: 0
Related Questions
- Fit HTML table with CSS
- How to make <td> fit to content
- Align "td"s in a table
- ASP.Net table width not being displayed correctly
- html table not formatted correctly
- How to align table in asp page?
- how to let table fit the browser size in html?
- Table formatting woes in asp.net
- CSS Table Layout Issue
- Table display issue