Colspan HTML dans CSS
j'essaie de construire un plan semblable à celui-ci:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
où le fond remplit l'espace de la rangée supérieure.
si c'était une table réelle, je pourrais facilement accomplir cela avec <td colspan="3"> , mais comme je crée simplement une table-comme layout , Je ne peux pas utiliser <table> tags. Est-ce possible à l'aide de CSS?
14 réponses
il n'y a pas d'analogique CSS simple et élégant pour colspan .
les recherches sur cette question permettront de trouver une variété de solutions qui incluent une foule de solutions de rechange, y compris le positionnement absolu, la taille, ainsi qu'une variété similaire de mises en garde spécifiques au navigateur et aux circonstances. Lisez, et prenez la meilleure décision éclairée que vous pouvez en fonction de ce que vous trouvez.
il n'y a pas de colspan dans CSS à ma connaissance, mais il y aura column-span pour la disposition à plusieurs colonnes dans un proche avenir, mais comme il s'agit seulement d'un projet dans CSS3, vous pouvez le vérifier dans ici . Quoi qu'il en soit, vous pouvez faire une solution de contournement en utilisant div et span avec l'affichage de type table comme ceci.
ce serait le HTML:
<div class="table">
<div class="row">
<span class="cell red first"></span>
<span class="cell blue fill"></span>
<span class="cell green last"></span>
</div>
</div>
<div class="table">
<div class="row">
<span class="cell black"></span>
</div>
</div>
et ce serait la css:
/* this is to reproduce table-like structure
for the sake of table-less layout. */
.table { display:table; table-layout:fixed; width:100px; }
.row { display:table-row; height:10px; }
.cell { display:table-cell; }
/* this is where the colspan tricks works. */
span { width:100%; }
/* below is for visual recognition test purposes only. */
.red { background:red; }
.blue { background:blue; }
.green { background:green; }
.black { background:black; }
/* this is the benefit of using table display, it is able
to set the width of it's child object to fill the rest of
the parent width as in table */
.first { width: 20px; }
.last { width: 30px; }
.fill { width: 100%; }
La seule raison d'utiliser cette astuce est d'obtenir l'avantage du comportement table-layout , Je l'utilise beaucoup si seulement le réglage div et la largeur de portée à un certain pourcentage n'a pas rempli notre exigence de conception.
mais si vous n'avez pas besoin de bénéficier du comportement table-layout , alors la réponse de durilai vous conviendrait assez.
une autre suggestion est d'utiliser flexbox au lieu de tables. C'est un "navigateur moderne" chose bien sûr, mais allez, c'est 2016 ;)
au moins ceci pourrait être une solution alternative pour ceux qui cherchent une réponse à cela de nos jours, puisque le post original était de 2010.
voici un grand guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.table {
border: 1px solid red;
padding: 2px;
max-width: 300px;
display: flex;
flex-flow: row wrap;
}
.table-cell {
border: 1px solid blue;
flex: 1 30%;
}
.colspan-3 {
border: 1px solid green;
flex: 1 100%;
}<div class="table">
<div class="table-cell">
row 1 - cell 1
</div>
<div class="table-cell">
row 1 - cell 2
</div>
<div class="table-cell">
row 1 - cell 3
</div>
<div class="table-cell colspan-3">
row 2 - cell 1 (spans 3 columns)
</div>
</div><div style="width: 100%;">
<div style="float: left; width: 33%;">Row 1 - Cell 1</div>
<div style="float: left; width: 34%;">Row 1 - Cell 2</div>
<div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>
cela ne fait pas partie du domaine de la CSS. colspan décrit la structure du contenu de la page, ou donne une certaine signification aux données dans le tableau, qui est le travail de HTML.
vous pourriez essayer d'utiliser un système de grille comme http://960.gs /
votre code serait quelque chose comme ceci, en supposant que vous utilisez une disposition de" 12 colonne":
<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>
column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */
http://www.quackit.com/css/css3/properties/css_column-span.cfm
essayez d'ajouter display: table-cell; width: 1%; à votre élément de la cellule de la table.
.table-cell {
display: table-cell;
width: 1%;
padding: 4px;
border: 1px solid #efefef;
}<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
<div class="table-cell">two</div>
<div class="table-cell">three</div>
<div class="table-cell">four</div>
</div>
<div class="table">
<div class="table-cell">one</div>
</div>si vous utilisez div et span il occupera plus de taille de code lorsque la ligne datagrid-table sont plus en volume. Ce code ci-dessous est coché dans tous les navigateurs
HTML:
<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4>
</div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
CSS:
#gridheading {
background: #ccc;
border-bottom: 1px dotted #BBBBBB;
font-size: 12px;
line-height: 30px;
text-transform: capitalize;
}
.data {
border-bottom: 1px dotted #BBBBBB;
display: block;
font-weight: normal;
line-height: 20px;
text-align: left;
word-wrap: break-word;
}
h4 {
border-right: thin dotted #000000;
display: table-cell;
margin-right: 100px;
text-align: center;
width: 100px;
word-wrap: break-word;
}
.data .big {
margin-right: 150px;
width: 200px;
}
vous pouvez toujours position:absolute; choses et de spécifier les largeurs. Ce n'est pas une façon très fluide de le faire, mais ça marcherait.
j'ai créé ce violon:
http://jsfiddle.net/wo40ev18/3/
HTML
<div id="table">
<div class="caption">
Center Caption
</div>
<div class="group">
<div class="row">
<div class="cell">Link 1t</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell ">Link 2</div>
</div>
</div>
CSS
#table {
display:table;
}
.group {display: table-row-group; }
.row {
display:table-row;
height: 80px;
line-height: 80px;
}
.cell {
display:table-cell;
width:1%;
text-align: center;
border:1px solid grey;
height: 80px
line-height: 80px;
}
.caption {
border:1px solid red; caption-side: top; display: table-caption; text-align: center;
position: relative;
top: 80px;
height: 80px;
height: 80px;
line-height: 80px;
}
peuvent être utilisées pour obtenir quelque chose de passable avec le markup dupliqué. Voici mon approche avec bootstrap:
<tr class="total">
<td colspan="1" class="visible-xs"></td>
<td colspan="5" class="hidden-xs"></td>
<td class="focus">Total</td>
<td class="focus" colspan="2"><%= number_to_currency @cart.total %></td>
</tr>
colspan 1 pour mobile, colspan 5 pour les autres avec CSS faisant le travail.
pour fournir une réponse à jour: la meilleure façon de le faire aujourd'hui est d'utiliser la disposition CSS grille comme ceci:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"top-left top-middle top-right"
"bottom bottom bottom"
}
.item-a {
grid-area: top-left;
}
.item-b {
grid-area: top-middle;
}
.item-c {
grid-area: top-right;
}
.item-d {
grid-area: bottom;
}
si vous venez ici parce que vous devez activer ou désactiver l'attribut colspan (par exemple pour une mise en page mobile):
dupliquer le <td> s et ne montrer que ceux avec le colspan désiré:
table.colspan--on td.single {
display: none;
}
table.colspan--off td.both {
display: none;
}<!-- simple table -->
<table class="colspan--on">
<thead>
<th>col 1</th>
<th>col 2</th>
</thead>
<tbody>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
<tr>
<!-- the <td> spanning both columns -->
<td class="both" colspan="2">both</td>
<!-- the two single-column <td>s -->
<td class="single">A</td>
<td class="single">B</td>
</tr>
<tr>
<!-- normal row -->
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
<!--
that's all
-->
<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
tableClasses.toggle('colspan--on');
tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>