Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Table and liquid layout

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #22831
    fedegrafo
    Member

    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

    #48173
    fedegrafo
    Member

    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 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.