Hi Everyone, I have a problem with a table in a liquid layout. The layout is made by a left column (200px) and a right liquid colum. Body has a margin (left-right 5%) to ensure the liquidity. Inside the right column I have a div (width auto) containing a table. When the table is rich of data and so it grows in width, It breaks the layout. So it'is no more contained in the box and the left part of the table has no background color (of table containing div).
CSS
body { margin: 0 5%; padding: 0; background:#e4e2e2 url(../img/body.jpg) top left repeat-x; color: #000; font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; }
<h1>Titolo principale</h1> <p>Sint oblique maluisset duo ut. Ut eam <a href=\"\">ignota persius</a> perpetua, quo id possim accusata oportere, timeam laboramus ius et. Habeo nostro electram ut sit, eum nisl reque te. Legimus tibique contentiones pri et, an ius facete tibique principes, dico dolorem contentiones pro ex.</p> <h2>Titolo secondario</h2> <p>Idque virtute periculis mea et, mea id atqui perfecto senserit, semper conceptam et sed. Sit malorum phaedrum disputationi an. No bonorum insolens sit, periculis consequat voluptatibus sit in. Per no affert nostrud ceteros, has id nonumy iracundia, erant disputando ne sea. Dictas antiopam reprimique at sit, velit doctus an quo, illud quidam in vel.</p>
<p><strong>Stet invenire nam no.</strong> Quando nostro eligendi has an, labores vulputate id nam, sonet impedit platonem id sit. In his democritum eloquentiam, an sed everti voluptaria. Doctus persecuti vituperata cu mea.</p>
<p>Sint oblique maluisset duo ut. Ut eam ignota persius perpetua, quo id possim accusata oportere, timeam laboramus ius et. Habeo nostro electram ut sit, eum nisl reque te. Legimus tibique contentiones pri et, an ius facete tibique principes, dico dolorem contentiones pro ex.</p> <p>Idque virtute periculis mea et, mea id atqui perfecto senserit, semper conceptam et sed. Sit malorum phaedrum disputationi an. No bonorum insolens sit, periculis consequat voluptatibus sit in. Per no affert nostrud ceteros, has id nonumy iracundia, erant disputando ne sea. Dictas antiopam reprimique at sit, velit doctus an quo, illud quidam in vel.</p> <p>Stet invenire nam no. Quando nostro eligendi has an, labores vulputate id nam, sonet impedit platonem id sit. In his democritum eloquentiam, an sed everti voluptaria. Doctus persecuti vituperata cu mea.</p> <p>Sint oblique maluisset duo ut. Ut eam ignota persius perpetua, quo id possim accusata oportere, timeam laboramus ius et. Habeo nostro electram ut sit, eum nisl reque te. Legimus tibique contentiones pri et, an ius facete tibique principes, dico dolorem contentiones pro ex.</p> <p>Idque virtute periculis mea et, mea id atqui perfecto senserit, semper conceptam et sed. Sit malorum phaedrum disputationi an. No bonorum insolens sit, periculis consequat voluptatibus sit in. Per no affert nostrud ceteros, has id nonumy iracundia, erant disputando ne sea. Dictas antiopam reprimique at sit, velit doctus an quo, illud quidam in vel.</p>
<tbody> <tr class=\"dispari\"><td class=\"cellenumeri\">1</td><td>corrispondentemente singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td></tr>
<tr class=\"pari\"><td class=\"cellenumeri\">1</td><td>corrispondentemente singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td></tr>
<tr class=\"selezionata\"><td class=\"cellenumeri\">1</td><td>corrispondentemente singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td></tr>
<tr class=\"pari\"><td class=\"cellenumeri\">1</td><td>corrispondentemente singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td><td>dato singolo tabella</td></tr>
A table cell will only shrink as narrow as the longest word or image in the cell, plus any padding or borders. So the whole table will only shrink as narrow as a whole row of table cells.
If you want to ensure that the table never breaks out of the column it's in, you should measure the table at it's narrowest and make sure the min-width of of the column it is in wider than that so it is unable to shrink to the point of not containing the table anymore. Min-width will not affect the fluidity of the layout.
Important to note that IE 6 doesn't respect min-width, so you'll either decide not to care about that or use an conditional stylesheet and alternate solution for IE 6 (like an expression)
The layout is made by a left column (200px) and a right liquid colum. Body has a margin (left-right 5%) to ensure the liquidity.
Inside the right column I have a div (width auto) containing a table. When the table is rich of data and so it grows in width, It breaks the layout. So it'is no more contained in the box and the left part of the table has no background color (of table containing div).
CSS
body {
margin: 0 5%;
padding: 0;
background:#e4e2e2 url(../img/body.jpg) top left repeat-x;
color: #000;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#intestazione {
width:100%;
height:100px;
background: #fff url(../img/header.jpg) 100% 0 no-repeat;
color: #000;
clear:both;
position:relative;
padding-bottom:10px;
}
#filtri{
width:100%;
height:40px;
padding-top:5px;
background:#eee;
color:#333;
font-size:10px;
line-height:1.2em;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#corpo {
width:100%;
float:left;
background: #FFF url(../img/colonna1.gif) 0 0 repeat-y;
}
#logo{
border:0;
float:left;}
#colonna-1 {
float:left;
width:200px;
background: transparent;
color: #000;
}
#colonna-2 {
margin-left:200px;
background:#fff;
color: #000;
padding-bottom:30px;
line-height:1.3em;/*per il peekaboo bug di generalita*/
}
#box_generalita{
width:100%;
height:40px;
background:#eee;
color:#333;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#generalita {
background:transparent;
color: #000;
margin-left:10px;
padding-top:10px;
}
#colonna-2, #pie-di-pagina {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
#colonna-2 h1{
font-family:Georgia, \"Times New Roman\", Times, serif;
background: transparent;
color: #7A0026;
font-weight:bold;
font-size:160%;
padding: 0.5em 25px;
}
#colonna-2 h2{
background: transparent;
color: #914D0D;
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:130%;
padding: 0.5em 25px;
}
div p {
margin: 0;
padding: 0.5em 25px;
}
#pie-di-pagina {
width:100%;
clear: left;
height:35px;
background:#fff url(../img/footer.gif) top left repeat-x;
color:#666;
text-align:right;
font-size:90%;
}
/*TABELLA*/
.contenitore_tabella{
width:auto;
margin:25px;
}
table {
width:auto;
font-size: 85%;
border: 1px solid #666;
border-collapse:collapse;
}
caption {
font-family:Georgia, \"Times New Roman\", Times, serif;
font-weight: bold;
font-size:150%;
text-align:left;
padding-bottom:5px;
color:#998F57;
background:transparent;
}
thead {
height:25px;
background: #998F57;
color: #fff;
text-align:left;
}
td, th {
border: 1px solid #666;
padding: 0.1em 0.2em;
vertical-align:top;
width:50px;
}
th{
background:transparent url(../img/th-down-arrow.jpg) no-repeat 100% 0;
}
tr.dispari {
height:30px;
background: #fff;
color: #000; }
tr.pari {
height:30px;
background: #F3F3F3;
color: #000;}
tr.selezionata {
height:30px;
background: #E6E0BC;
color: #000;}
.cellenumeri{
width:20px;
background:#BAB9B6;
color:#fff;
text-align:center;
font-weight:bold;}
.filtro_tabella{
margin-top:3px;
padding:0;
width:50px;
vertical-align:top;}
/*stop*/
XHTML
Here is the online code (incorporated css)
http://www.fedegrafia.com/forum/tabella_css.htm
Is it possible that table enlarges the right-column?
Thanks in advance for help Fedegrafo :D
If you want to ensure that the table never breaks out of the column it's in, you should measure the table at it's narrowest and make sure the min-width of of the column it is in wider than that so it is unable to shrink to the point of not containing the table anymore. Min-width will not affect the fluidity of the layout.
Important to note that IE 6 doesn't respect min-width, so you'll either decide not to care about that or use an conditional stylesheet and alternate solution for IE 6 (like an expression)
I'm going to apply your suggestion, though probably There will be some problems because I don't know the exact with of the table
Bye
Fede