I want my 'columns' in the table to have a fixed (rigid) width, independent of the content.
How is this to be done?
cheers,
Mark
css:
<style>
#sv {
width:930px;
margin-right:auto;
margin-left:auto;
margin-top:5px;
padding:0px;
text-align:center;
}
/* tableless tables */
div.tableless {
width: 450px;
background-color:#fff;
border: 0px dotted #fff;
padding: 5px;
margin: 0px auto;
}
div.row {
clear: both;
padding-top: 10px;
}
div.row span.col1 {
float: left;
width: 100px;
text-align: right;
}
div.row span.col2 {
float: right;
width: 200px;
text-align: left;
}
</style>
html:
<div id="sv">
<div class="tableless">
<div class="row">
<span class="col1">col1111111111111111111111111111111111111111</span>
<span class="col2">field111111111111111111111111111111111111111</span>
</div>
<div class="row">
<span class="col1">col1</span>
<span class="col2">field</span>
</div>
<div class="row">
<span class="col1">col1</span>
<span class="col2">field</span>
</div>
<div class="row">
<span class="col1">col1</span>
<span class="col2">field</span>
</div>
<div class="row">
<span class="col1">col1</span>
<span class="col2">field</span>
</div>
<div class="spacer">
 
</div>
</div>
</div>
css tables fixed width columns
Hi sionvalais,
Have you tried using overflow set to hidden or scroll on col1 and col2.
Hope that helps