Problema con larghezza celle

**Danelius** · 22-03-2014, 03:19

Ciao ragazzi! Ho preso uno script di una tabella con scrollbar particolare da qui: http://blog.jaimon.co.uk/datascroller/fxHeader_0.6.html
modificandolo in questo modo:

codice:

<head>
           
        body, .mt {
        padding:0px;
        font-family: Verdana,Arial,Geneva,Helvetica,sans-serif; font-size: 12px;
        }
        
            body {
        margin:5px;
        }
        
            p{
        margin:30px 0px 30px 0px;
        }
        
            table.mt {
        border: 0px solid #DDD;
        border-spacing:0px;
        border-style: solid;
        border-color: #cfcfcf;
        border-collapse: collapse;
        background-color: transparent;
        }
        

        
        th {
        width: 100px
        padding: 1px;
        background-color: #afafaf;
        text-align:left;
        border: 1px solid #DDD;
        background: repeat-x scroll 50% 50% #F6F6F6;
        font-weight: bold;
        color: #0073EA;
        }
        
            td {
        border-width: 1px;
        padding: 1px;
        border-style: solid;
        border-color: #cfcfcf;
        text-align: left;vertical-align:middle;
        }
        
            .frc {
        background: #efefef;
        }
        
        div.div_mio{
        font-family: Verdana,Arial,Geneva,Helvetica,sans-serif; 
        font-size: 12px;
        border-style: hidden;
        }
        </style>
    </head>
    <body>
        <form action="#">
            
          
        <div style="float:left;width:410px;">
                        <table id="dataTable2" width="400" class="mt">
            <tr><th>Luogo</th><th>Lunedi 1</th><th>Martedi 2</th><th>Mercoledi 3</th><th>Giovedi 4</th><th>Venerdi 5</th><th>Sabato 6</th><th>Domenica 7</th></tr>
            <tr><td class="frc">Luogo 2</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Evento X</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 4</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 5</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 6</td><td>asdas</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 7</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 8</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 10</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 12</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 13</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 14</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 15</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
            <tr><td class="frc">Luogo 16</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell5WithSomeLongContent</td><td>Cell 6</td><td>Cell 7</td><td>Cell 8</td></tr>
                        </table>
            </div>
            
           
        </form>
        <script type="text/javascript" src="tab2_files/fxHeader.js"></script>
        <script type="text/javascript">
            
            fxheaderInit('dataTable2',200,1,1);
          
            fxheader();
        </script>
    </body>
</html>

mentre questo è il file js "fxHeader_0.6.js": http://blog.jaimon.co.uk/datascroller/fxHeader_0.6.js
il problema è che non riesco ad allargare le celle della tabella per evitare che il testo contenuto non vada a capo. Mi aiutate per favore?

**Prill** · 22-03-2014, 11:54

manca un ; in width:100px (in th), correggi intanto lì

edit:
ma anche dopo la correzione non fungerà lo stesso. Specificare per le celle una larghezza di 100px, in presenza di 8 celle richiederebbe una tabella larga 800px (più bordi), ma la larghezza della tabella in realtà è di 400px (che è l'impostazione dell'area immediatamente visibile, essendo affidato ciò che fuoriesce allo scrolling)

le celle si adattano in base al contenuto.

Una soluzione semplice è racchiudere i giorni della settimana nelle celle di intestazione della prima riga in un paragrafo largo 100px

**Danelius** · 22-03-2014, 15:07

Grazie Prill! Sempre operativo!

Poi ho trovato questa soluzione, molto più gestibile e con pochissimo codice. La riporto qui, se può servire a qualcuno:

codice:

<html>
<head>
<style>
body {width:350px;}
.q1, .q2, .q3, .q4 {overflow:hidden; display:block; float:left;}
.q1 {width:50px; height: 30px;}
.q2 {width:300px; height: 30px;}
.q3 {width:50px; height: 100px;}
.q4 {width:300px; height: 100px; overflow:auto;}

.q2 .firstCol, .q3 thead, .q4 thead, .q4 .firstCol {display:none;}
.q2 td {background-color:#999;}
.q3 td {background-color:#999;}
.container {width:9999px;}

</style>

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(document).ready(function(){
   $('.q4').bind('scroll', fnscroll);
   $('.q2').html($('.q4').html());
   $('.q3').html($('.q4').html());
});

function fnscroll(){

$('.q2').scrollLeft($('.q4').scrollLeft());
$('.q3').scrollTop($('.q4').scrollTop());


}

</script>
</head>


<body>
         <div class="q1"><div class="container"></div></div>
         <div class="q2"><div class="container"></div></div>
         <div class="q3"><div class="container"></div></div>
         <div class="q4">
            <div class="container">
            <table>
               <thead>
                  <tr>
                     <td class="firstCol"></td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                  </tr>
               </thead>
               <tbody>
               <?php for($c=0; $c<50; $c++) { ?>
                  <tr>
                     <td class="firstCol">Row</td>
                     <td>this is some content</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr>
               <?php } ?>
               </tbody>
            </table>
            </div>
         </div>
</body>
</html>

fonte: http://stackoverflow.com/questions/8...d-fixed-column

**Prill** · 22-03-2014, 15:57

Bene. Grazie di quest'altra soluzione

**Danelius** · 25-03-2014, 02:29

Lo script è ottimo..solo che io sono proprio negato con questi css. Vorrei personalizzarlo con uno stile carino, ma ho il problema sia ad allineare le colonne (quelle q2 dell'header con le q4 del contenitore), sia ad aumentare le celle automaticamente in base allo spazio che occupa il testo

index.html

codice:

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


<script src="X/jquery-1.7.min.js"></script>
<script>
$(document).ready(function(){
   $('.q4').bind('scroll', fnscroll);
   $('.q2').html($('.q4').html());
   $('.q3').html($('.q4').html());
});

function fnscroll(){

$('.q2').scrollLeft($('.q4').scrollLeft());
$('.q3').scrollTop($('.q4').scrollTop());


}

</script>
</head>


<body>
         <div class="q1"><div class="container"></div></div>
         <div class="q2"><div class="container"></div></div>
         <div class="q3"><div class="container"></div></div>
         <div class="q4">
            <div class="container">
            <table>
               <thead>
                  <tr>
                     <td class="firstCol">&nbsp;</td>
                     <td>Col1</td>
                     <td>Col2</td>
                     <td>Col3</td>
                     <td>Col4</td>
                     <td>Col5</td>
                     <td>Col6</td>
                     <td>Col7</td>
                     <td>Col8</td>
                  </tr>
               </thead>
               <tbody>
               
                  <tr>
                     <td class="firstCol">Row152</td>
                     <td>this is some content part</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row_1</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr>
               <tr>
                     <td class="firstCol">Row1523</td>
                     <td>this is some content</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row 152</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr><tr>
                     <td class="firstCol">Row55358</td>
                     <td>this is some content</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr><tr>
                     <td class="firstCol">Row</td>
                     <td>this is some content</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr><tr>
                     <td class="firstCol">Row</td>
                     <td>this is some content</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr><tr>
                     <td class="firstCol">Row</td>
                     <td>this is some content</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr><tr>
                     <td class="firstCol">Row</td>
                     <td>this is some content</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr><tr>
                     <td class="firstCol">Row</td>
                     <td>this is some content</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr>
               </tbody>
            </table>
            </div>
         </div>
</body>
</html>

X1.css

codice:

body {width:400px;}
.q1, .q2, .q3, .q4 {overflow:hidden; display:block; float:left;}
.q1 {width:64px; height: 20px;}
.q2 {width:300px; height: 20px;}
.q3 {width:64px; height: 100px;}
.q4 {width:300px; height: 120px; overflow:auto;}
.container {width:9999px;}

.q2 .firstCol, .q3 thead, .q4 thead, .q4 .firstCol {display:none;}

.q1 td {
    text-align:center;
    border: 1px solid #DDD;
    background: #F6F6F6;
}
.q2 td {
    font-family: Verdana;
    font-weight: normal;
    font-size: 12px;
    text-align:center;
    border: 1px solid #DDD;
    background: steelblue;
    font-weight: bold;
    color: white;}
.q3 td {
    font-family: Arial;
    font-weight: normal;
    font-size: 12px;
    text-align:center;
    border: 1px solid #DDD;
    background: #F6F6F6;
    font-weight: lighter;
    color: #0073EA;}
.q4 td {
    text-align:center;
    border: 1px solid #DDD;
    background: white;
    font-weight: normal;
    color: black;
    }



table{
    border: 1px solid #DDD;
    border-spacing:0px;
    border-style: solid;
    border-color: #cfcfcf;
    border-collapse: collapse;
    background-color: transparent;
}

un aiutino?

**Danelius** · 25-03-2014, 16:33

ho provato in quest'altro:

codice:

table {
   border-collapse: collapse;
  border: 1px solid #38678f;
  margin: 50px auto;
  background: white;
}
thead {
  background: steelblue;
  font-weight: bold;
  text-shadow: 0 1px 0 #38678f;
  color: white;
  border: 1px solid #38678f;
  box-shadow: inset 0px 1px 2px #568ebd;
  transition: all 0.2s;
}
tr {
  border-bottom: 1px solid #cccccc;
}

td {
  border-right: 1px solid #cccccc;
  padding: 10px;
  transition: all 0.2s;
}

.firstCol {
  background: skyblue;
  font-weight: bold;
  text-shadow: 0 1px 0 #38678f;
  color: white;
  border: 1px solid #38678f;
  box-shadow: inset 0px 1px 2px #568ebd;
  transition: all 0.2s;
}

però funziona solo come semplice tabella (senza div)...appena inserisco i div, sfasa tutto

Dove sbaglio? Mi date una mano per favore?

Discussione: Problema con larghezza celle

Strumenti discussione

Ricerca discussione

Visualizza

Problema con larghezza celle

Permessi di invio