Comment sur l'utilisation d' inline-block avec un fixe, width tableau... Ou à l'aide de % environ 45% de width votre td éléments de sorte que vous n'aurez pas besoin de définir width de la table
Démo
Ici, je suis tout simplement en tournant l' td de display: inline-block; , et en raison de l'fixe width tableau, ils seront obligés de passer à la ligne suivante.
Aussi, je suis en utilisant word-wrap: break-word; de la propriété, de sorte que non espacés les chaînes sont tenues de se rompre.
table {
width: 120px;
}
table tr td {
width: 50px;
word-wrap: break-word;
}
table tr td {
display: inline-block;
margin-top: 2px;
}
Vous pouvez utiliser % base width , de sorte que vous n'avez pas besoin de se soucier de la cellule largeurs....
Vous pourriez avoir besoin d' vertical-align: top; avec min-height si dans le cas d'une cellule est vide dans votre table
table tr td {
display: inline-block;
margin-top: 2px;
vertical-align: top;
min-height: 20px;
}
Démo (requis Uniquement si une cellule est vide)
Il suffit de noter qu' inline-block va causer quelques problèmes avec 4px de décalage, dans ce cas il suffit d'attribuer font-size: 0; de la table re-régler l' font-size de retour pour votre td d'élément, de cette façon, vous obtiendrez la cohérence dans la cellule de la marge.
Avertissement: je ne pourrais jamais vous recommandons de faire ce genre de choses, de sorte
gardez ce que votre dernière priorité. Si vous avez le contrôle JavaScript, que
envisager d'inclure tr autour de la td
A partir d'ici, s'il vous plaît ignorer si vous ne pouvez pas utiliser jQuery, dire supposons que vous disposez d'une aide de la bibliothèque de jQuery, vous pouvez simplement ajouter l'extrait de code pour que le fichier JS....
(Am ajout d'un class ici pour identifier l'élément, class peuvent également être ajoutés à l'aide de .addClass() par définir certains des plus proche sélecteur CSS) , donc pas question de modifier le code HTML ici.
$('table.wrap_trs tr').unwrap(); //Remove default pre-generated tr
var cells = $('table.wrap_trs tr td');
for (var i = 0; i < cells.length; i += 2) {
cells.slice(i, i + 2).wrapAll('<tr></tr>'); //Wrapping the tds with tr
}
Démo
