jxbma
asked on
How do I apply <td> (column) widths as a % of a table width in HTML5 using CSS3?
Hi:
I'm in the middle of coming up to speed with HTML5.
I'm having issues applying a css3 style (via class) to a <td>.
I'm basically trying to do a "flow/responsive" layout where the columns
widths are a % of the table.
What I'd like to do is have Col1 and Col2 be a fixed % of the table width,
while Col3 and Col4 use the remaing width as needed.
My Css3 styles look like:
-------------------------- -------
div.Wrapper{
background-color: yellow;
width: 96%;
}
table{
border: 3px solid black;
background-color: aquamarine;
font-size: .75em;
width: 98%;
}
thead {
border: 3px solid black;
font-weight: bold;
text-decoration: underline;
text-align: center;
color: yellow;
}
td {
border: 3px solid black;
background-color: orange;
}
td.Col1{
width: 39.583%;
font-height: 30px;
color: aquamarine;
}
td.Col2 {
width: 5.20833%;
font-height: 16px;
color: green;
}
My html looks like:
-------------------------- -
<div class='Wrapper'>
<table>
<thead>
<tr>
<td class='col1'>Col 1</td>
<td class='col2'>Col 2</td>
<td class='col3'>Col 3</td>
<td class='col4'>Col 4</td>
</tr>
</thead>
<tbody>
<tr>
<td class='col1'>Col 1 Value</td>
<td class='col2'>Col 2 Value</td>
<td class='col3'>Col 3 Value</td>
<td class='col4'>Col 4 Value</td>
</tr>
<tr>
<td class='col1'>Col 1 Value</td>
<td class='col2'>Col 2 Value</td>
<td class='col3'>Col 3 Value</td>
<td class='col4'>Col 4 Value</td>
</tr>
</tbody>
</table>
</div>
I'm in the middle of coming up to speed with HTML5.
I'm having issues applying a css3 style (via class) to a <td>.
I'm basically trying to do a "flow/responsive" layout where the columns
widths are a % of the table.
What I'd like to do is have Col1 and Col2 be a fixed % of the table width,
while Col3 and Col4 use the remaing width as needed.
My Css3 styles look like:
--------------------------
div.Wrapper{
background-color: yellow;
width: 96%;
}
table{
border: 3px solid black;
background-color: aquamarine;
font-size: .75em;
width: 98%;
}
thead {
border: 3px solid black;
font-weight: bold;
text-decoration: underline;
text-align: center;
color: yellow;
}
td {
border: 3px solid black;
background-color: orange;
}
td.Col1{
width: 39.583%;
font-height: 30px;
color: aquamarine;
}
td.Col2 {
width: 5.20833%;
font-height: 16px;
color: green;
}
My html looks like:
--------------------------
<div class='Wrapper'>
<table>
<thead>
<tr>
<td class='col1'>Col 1</td>
<td class='col2'>Col 2</td>
<td class='col3'>Col 3</td>
<td class='col4'>Col 4</td>
</tr>
</thead>
<tbody>
<tr>
<td class='col1'>Col 1 Value</td>
<td class='col2'>Col 2 Value</td>
<td class='col3'>Col 3 Value</td>
<td class='col4'>Col 4 Value</td>
</tr>
<tr>
<td class='col1'>Col 1 Value</td>
<td class='col2'>Col 2 Value</td>
<td class='col3'>Col 3 Value</td>
<td class='col4'>Col 4 Value</td>
</tr>
</tbody>
</table>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Any updates?