Problèmes avec colspan en CSS table

Je suis en train de réaliser un tableau dont la première colonne est deux fois plus longue que les deux autres colonnes. Quand je l'applique colspan=2 sur la table, il ne fait rien

Code de l'action

http://jsfiddle.net/US96B/

Raw code ci-dessous

<div class="datagrid">
    <table>';
        <thead><tr><th colspan="2">header</th><th>header</th><th>header</th></tr></thead>
        <tfoot><tr><td colspan="4"><div id="no-paging">&nbsp;</div></tr></tfoot>
        <tbody>
            <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
            <tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
        </tbody>
    </table>
</div>

Le CSS

.datagrid table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #5492A2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
padding: 10px 0px;
}
.datagrid table thead th {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #288096), color-stop(1, #288096) );
background:-moz-linear-gradient( center top, #288096 5%, #288096 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#288096', endColorstr='#288096');
background-color:#288096;
color:#FFFFFF;
font-size: 18px;
font-weight: bold;
border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table tbody td {
color: #D4D2D2;
border-left: 1px solid #D4D2D2;
font-size: 16px;
border-bottom: 1px solid #E1EEF4;
font-weight: normal;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}
.datagrid table tfoot td div {
border-top: 1px solid #5492A2;
background: #FFFFFF;
}
.datagrid table tfoot td {
padding: 0;
font-size: 18px
}
.datagrid table tfoot td div {
padding: 0px;
}

OriginalL'auteur Julian | 2013-08-08

3

Elle a effectivement travaille. Mais depuis, ils sont TOUS à colspaning vous ne pouvez pas le dire.

Voici mon violon vous indiquant que le colspan est de travail (la première ligne tbody j'ai mis à 4 colonnes, sans s'étend sur). Si vous essayez de réaliser un "regard" de la première 2 couvrant ensemble, vous pouvez ajuster les largeurs comme je l'ai fait dans mon Violon (50% /25% /25%)

http://jsfiddle.net/doitlikejustin/US96B/4/

OriginalL'auteur doitlikejustin
3

colspan n'est pas utilisé pour spécifier le width de colonnes que vous avez fait. Ce est utilisé pour montrer notamment cell fractionné en plusieurs columns. Mais dans votre cas colspan ne doit pas être utilisé. Au lieu de cela, vous pouvez utiliser width 50% pour la 1ère colonne et 25% pour les deux autres cols.

Mais si vous souhaitez utiliser colspan, la façon suivante fonctionnera.
```
<div class="datagrid">
<table>
<thead>
<tr>
<th colspan="2" width="25%">header</th>
<th width="25%"></th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td></td><td>data</td><td>data</td></tr>
</tbody>
</table>
</div>
```
L'utilisation de colspan est même pas valide ici: il viole le code HTML modèle de table, comme on peut le voir en validant le code HTML5. (HTML5 contrôles de validation de telles choses.)
Je sais que ce n'est pas valide. Mais ce code os ajoutés juste pour montrer comment colspan peut être utilisé pour obtenir le résultat souhaité.
Les exemples ici, utiliser des pourcentages, parce que l'utilisation réelle de la largeur en pixels ne fonctionne tout simplement pas comme prévu. Si 1 veux que ma colonne à 100 pixels de large, je dois changer de plus de 1 ligne de code pour y arriver. c'est à dire css est mal mis en œuvre dans ce domaine.

OriginalL'auteur Narendra
1

Qu'en spécifiant width="50%" dans la première <th> et width="25%" dans les deux autres? Pas besoin de colspan à tous.

OriginalL'auteur John
0

J'ai mis à jour votre violon, et il fonctionne comme prévu maintenant.

EXEMPLE
```
.datagrid table thead th:first-child {
border: none;
width:50%;
}
```
OriginalL'auteur Thanos

Vous devez vous connecter pour publier un commentaire.