Mix Column percentage and pixels width settings in HTML and CSS
Description
The following code shows how to mix Column percentage and pixels width settings.
Example
<html>
<head>
<!-- ww w . ja va 2 s. co m-->
<style type="text/css" media="Screen">
* .fixed-layout {
table-layout: fixed;
}
* .stretched {
width: 100%;
}
* .flex {
width: auto;
background: blue;
}
* .sized1 {
width: 500px;
background: gray;
}
* .sized2 {
width: 200px;
background: menu;
}
* .p1 {
width: 80%;
background: red;
}
* .p2 {
width: 20%;
background: yellow;
}
</style>
</head>
<body>
<table class="fixed-layout stretched">
<tr>
<td class="sized1">500px</td>
<td class="sized2">200px</td>
<td class="p1">80%</td>
<td class="p2">20%</td>
<td class="flex">auto</td>
</tr>
</table>
</body>
</html>
The code above generates the following result.
...
Add mouse hover effect for each row in a ta...
Add padding to table cell in HTML and CSS
Add style for even/odd table row in HTML an...
Add style to row hover event in CSS in HTML...
Add style to table header in HTML and CSS
Assign different style to odd and even row ...
Compare separate and collapse table border ...
Create table with round corner in HTML and ...
Highlight both column and row on hover in C...
Highlight one row in table in HTML and CSS
Hight column with column hover CSS in HTML ...
Make the first table column sticky with CSS...
Mix Auto-layout Table with Flex Columns in ...
Set Padding for table cell in HTML and CSS
Set background color for table header in HT...
Set background for column group in HTML and...
Set border bottom for table cell in HTML an...
Set border collapse for table in HTML and C...
Set border for table cell in HTML and CSS
Set border for table header in HTML and CSS
Set border for table in HTML and CSS
Set border left for table cell in HTML and ...
Set border right for table cell in HTML and...
Set border space for table in HTML and CSS
Set border-spacing for table in HTML and CS...
Set border top for table cell in HTML and C...
Set color for table cell in HTML and CSS
Set color for table header in HTML and CSS
Set font for table in HTML and CSS
Set font size for column group in HTML and ...
Set padding for table header in HTML and CS...
Set style for right bottom cell in HTML and...
Set style for top right table cell in HTML ...
Set style per table column in HTML and CSS
Set table border collapse to separate in HT...
Set table caption to bottom in HTML and CSS
...
Add mouse hover effect for each row in a ta...
Add padding to table cell in HTML and CSS
Add style for even/odd table row in HTML an...
Add style to row hover event in CSS in HTML...
Add style to table header in HTML and CSS
Assign different style to odd and even row ...
Compare separate and collapse table border ...
Create table with round corner in HTML and ...
Highlight both column and row on hover in C...
Highlight one row in table in HTML and CSS
Hight column with column hover CSS in HTML ...
Make the first table column sticky with CSS...
Mix Auto-layout Table with Flex Columns in ...
Mix Column percentage and pixels width sett...
Mix Fixed Table with Flex Columns in HTML a...Set Padding for table cell in HTML and CSS
Set background color for table header in HT...
Set background for column group in HTML and...
Set border bottom for table cell in HTML an...
Set border collapse for table in HTML and C...
Set border for table cell in HTML and CSS
Set border for table header in HTML and CSS
Set border for table in HTML and CSS
Set border left for table cell in HTML and ...
Set border right for table cell in HTML and...
Set border space for table in HTML and CSS
Set border-spacing for table in HTML and CS...
Set border top for table cell in HTML and C...
Set color for table cell in HTML and CSS
Set color for table header in HTML and CSS
Set font for table in HTML and CSS
Set font size for column group in HTML and ...
Set padding for table header in HTML and CS...
Set style for right bottom cell in HTML and...
Set style for top right table cell in HTML ...
Set style per table column in HTML and CSS
Set table border collapse to separate in HT...
Set table caption to bottom in HTML and CSS
...