Bordi delle celle tabella con scroll bar interna

**criscap1985** · 29-10-2015, 10:51

Buongiorno,
è un piacere essere inscritto in questo interessante forum di HTML.it. Ho un piccolo forse anche stupido problema allora dato il seguente codice HTML:

codice:

<html>
<head>
<link href="tabella.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<table class="tbext">
    <thead class="testa">
        <tr>
            <th class="col1">Prev. N.</th>
            <th class="col2">Cliente</th>
            <th class="col3">Telefono</th>
            <th class="col4">Veicolo</th>
            <th class="col5">Prev. Consegna</th>
            <th class="col6">Stato</th>
            <th class="col7">Priorit&agrave;</th>
            <th class="col8"> </th> 
        </tr>
    </thead> 
    <tbody>
        <tr>
            <td colspan="8">
        <div class="scrollit">
            <table class="tbint">
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
            </table>
        </div>
                </td>
        </tr>
    </tbody>
</table>
<body>
</html>

e il suo relativo CSS:

codice:

.tbext{
    border-collapse: collapse; 
    width:100%;
    padding:0px;
    margin:0px;
    border: 1px solid #666666;
}


.tbint tr{
    height: 18px; 
    border-color: green;
      
}


tbody div{
    overflow-y:scroll;
    height:130px;
    border: none;
    width: 100%;
    overflow-x: hidden;
}
 
.testa{
    font-family: Arial;
    font-size: 9pt;
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(grigio_scuro.png);
    background-repeat: repeat-x;
    height:22px;
    border-color:#666666;
    border: 1px solid #666666;
    padding:0px;
    margin:0px;
}


.col1{
    width: 2%;
    border-color:#666666;
    border: 1px solid #666666;
    border-right: none;
}
.col2{
    width: 8%; 
    border-color:#666666;
    border: 1px solid #666666;
    border-right: none;
    border-left: none;
}
.col3{
    width: 5%; 
    border-color:#666666;
    border: 1px solid #666666;
    border-right: none;
    border-left: none;
}
.col4{
    width: 8%; 
    border-color:#666666;
    border: 1px solid #666666;
    border-right: none;
    border-left: none;
}
.col5{
    width: 4%; 
    border-color:#666666;
    border: 1px solid #666666;
    border-right: none;
    border-left: none;
}
.col6{
    width: 8%; 
    border-color:#666666;
    border: 1px solid #666666;
    border-right: none;
    border-left: none;
}
.col7{
    width: 4%; 
    border-color:#666666;
    border: 1px solid #666666;
    border-right: none;
    border-left: none;
}
.col8{
    width: 4%; 
    border-color:#666666;
    border: 1px solid #666666;
    border-right: none;
    border-left: none;
}

Ottengo una tabella di questo tipo come nella seguente immagine:

Tabella Problema.jpg

Perchè non riesco a visualizzare i bordi delle celle?
Chiaramente l'ultima colonna non si devono vedere i bordi delle celle a patto di quella sinistra (border-left). Lì ci andranno i pulsanti in formato immagine.
Potreste cortesemente aiutarmi a capire dove sta il problema e dove posso far si che il bordo di 0.5pt o 0.5px sia visibile per tutte le celle a meno dell'ultima colonna come già detto sopra.
Grazie
Cordialmente

Cristian Capannini

**m4rko80** · 29-10-2015, 15:51

Ciao, con lo style e border dai il bordo esterno alla tabella/tag.
Se vuoi il bordo interno delle celle devi usare <table border="1" ....>

**criscap1985** · 29-10-2015, 17:31

Originariamente inviata da m4rko80

Ciao, con lo style e border dai il bordo esterno alla tabella/tag.
Se vuoi il bordo interno delle celle devi usare <table border="1" ....>

Mmmm... Ho modificato entrambi i codici HTML e CSS e ora l'header risulta non allineato alle righe dellla sua colonna di corrispondenza....insomma l'header è storto rispetto al normale. Devo usare le percentuali perchè se viene ingrandito viene brutto. Qualcuno mi può aiutare per questo banale problema?

HTML:

codice:

<html>


<head>
    <link href="tabella.css" rel="stylesheet" type="text/css" />
</head>


<body>


    <div class="div1">
        <table class="tab1">
            <colgroup>
                <col width="5%" />
                <col width="20%" />
                 <col width="10%" />
               <col width="15%" />
                <col width="10%" />
                <col width="17%" />
                <col width="10%" />
                <col width="10%" /> 
            </colgroup>
            <tbody>
                <tr class="style1">
                    <th class="style1">
                        Prev. N.
                    </th>
                    <th class="style1">
                        Cliente
                    </th>
                    <th class="style1">
                        Telefono
                    </th>
                    <th class="style1">
                        Veicolo
                    </th>
                    <th class="style1">
                        Prev. Consegna
                    </th>
                    <th class="style1">
                        Stato
                    </th>
                    <th class="style1">
                        Priorit&agrave;
                    </th>
                    <th class="style1">


                    </th>
                </tr>
            </tbody>
        </table>
        <div class="div2">
            <table class="tab2">
                <colgroup>
                   <col width="5%" />
                <col width="20%" />
                 <col width="10%" />
               <col width="15%" />
                <col width="10%" />
                <col width="17%" />
                <col width="10%" />
                <col width="10%" /> 
                </colgroup>
                <tbody class="style1">
                    <tr class="style1">
                        <td class="style2">
                            Row A-1
                        </td>
                        <td class="style2">
                            Row A-2
                        </td>
                        <td class="style2">
                            Row A-3
                        </td>
                        <td class="style2">
                            Row A-4
                        </td>
                        <td class="style2">
                            Row A-5
                        </td>
                        <td class="style2">
                            Row A-6
                        </td>
                        <td class="style2">
                            Row A-7
                        </td>
                        <td class="style2">
                          
                        </td>
                    </tr>
                    <tr class="style1">
                        <td class="style2">
                            Row A-1
                        </td>
                        <td class="style2">
                            Row A-2
                        </td>
                        <td class="style2">
                            Row A-3
                        </td>
                        <td class="style2">
                            Row A-4
                        </td>
                        <td class="style2">
                            Row A-5
                        </td>
                        <td class="style2">
                            Row A-6
                        </td>
                        <td class="style2">
                            Row A-7
                        </td>
                        <td class="style2">
                          
                        </td>
                    </tr>
                    <tr class="style1">
                        <td class="style2">
                            Row A-1
                        </td>
                        <td class="style2">
                            Row A-2
                        </td>
                        <td class="style2">
                            Row A-3
                        </td>
                        <td class="style2">
                            Row A-4
                        </td>
                        <td class="style2">
                            Row A-5
                        </td>
                        <td class="style2">
                            Row A-6
                        </td>
                        <td class="style2">
                            Row A-7
                        </td>
                        <td class="style2">
                         
                        </td>
                    </tr>
                    <tr class="style1">
                        <td class="style2">
                            Row A-1
                        </td>
                        <td class="style2">
                            Row A-2
                        </td>
                        <td class="style2">
                            Row A-3
                        </td>
                        <td class="style2">
                            Row A-4
                        </td>
                        <td class="style2">
                            Row A-5
                        </td>
                        <td class="style2">
                            Row A-6
                        </td>
                        <td class="style2">
                            Row A-7
                        </td>
                        <td class="style2">
                       
                        </td>
                    </tr>
                    <tr class="style1">
                        <td class="style2">
                            Row A-1
                        </td>
                        <td class="style2">
                            Row A-2
                        </td>
                        <td class="style2">
                            Row A-3
                        </td>
                        <td class="style2">
                            Row A-4
                        </td>
                        <td class="style2">
                            Row A-5
                        </td>
                        <td class="style2">
                            Row A-6
                        </td>
                        <td class="style2">
                            Row A-7
                        </td>
                        <td class="style2">
                         
                        </td>
                    </tr>
                    <tr class="style1">
                      <td class="style2">
                            Row A-1
                        </td>
                        <td class="style2">
                            Row A-2
                        </td>
                        <td class="style2">
                            Row A-3
                        </td>
                        <td class="style2">
                            Row A-4
                        </td>
                        <td class="style2">
                            Row A-5
                        </td>
                        <td class="style2">
                            Row A-6
                        </td>
                        <td class="style2">
                            Row A-7
                        </td>
                        <td class="style2">
                         
                        </td>
                    </tr>
                    <tr class="style1">
                        <td class="style2">
                            Row A-1
                        </td>
                        <td class="style2">
                            Row A-2
                        </td>
                        <td class="style2">
                            Row A-3
                        </td>
                        <td class="style2">
                            Row A-4
                        </td>
                        <td class="style2">
                            Row A-5
                        </td>
                        <td class="style2">
                            Row A-6
                        </td>
                        <td class="style2">
                            Row A-7
                        </td>
                        <td class="style2">
                           
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <body>


</html>

CSS:

codice:

.div1{    margin: 0; 
    padding: 0;
    border-collapse: collapse; 
    width: 100%;/*519px;*/ 
    height: 140px; 
    overflow: hidden; 
    border: 1px solid #666666;
}


.tab1{
    margin: 0; 
    padding: 0; 
    background-image: url(img/grigio_scuro.png);
    background-repeat: repeat-x;
    border-collapse: collapse; 
    color: #FFFFFF; 
    width: 100%;/*517px;*/ 
    height: 22px; 
    text-align: center; 
font-family: Arial;
font-weight:bold;    
font-size:9pt;
}


.style1{
    
    margin: 0; 
    padding: 0; 
    border-collapse: collapse;
    
}


.style2{
    border: 1px solid #CCCCCC;
}


.div2{
    margin: 0; 
    padding: 0; 
    border-collapse: collapse; 
    width: 100%; /* 517px; */ 
    height: 120px; 
    overflow: auto;
}


.tab2{
        
margin: 0; 
padding: 0; 
border-collapse: collapse; 
width: 100%; /*500px;*/
font-family: Arial;
font-weight:bold;    
font-size:9pt;
text-align:center;
    
}

Risultato:

Tabella New.jpg

Grazie
Cris

Discussione: Bordi delle celle tabella con scroll bar interna

Strumenti discussione

Ricerca discussione

Visualizza

Bordi delle celle tabella con scroll bar interna

Si ma.....

Tag per questa discussione

Permessi di invio