Grow your CSS skills. Land your dream job.

Table and liquid layout

  • # June 26, 2008 at 3:09 am

    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

    Code:
    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

    Code:

    Titolo principale

    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.

    Titolo secondario

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    Titolo tabella
    Voce Voce Voce Voce Voce Voce Voce Voce Voce Voce Voce Voce Voce Voce Voce Voce Voce
    1 corrispondentemente singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella
    1 corrispondentemente singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella
    1 corrispondentemente singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella
    1 corrispondentemente singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella dato singolo tabella

    link | link | link

    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

    # June 26, 2008 at 8:58 am

    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)

    # June 27, 2008 at 6:06 am

    Thanks Cris,

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".