0
S'il vous plaît jeter un oeil à cette vidéo, il explique mon problème: http://www.youtube.com/watch?v=Zeq_BZ5QgCgTable ne se contracte pas
Il est une table simple. Lorsque je redimensionne la page, la table est redimensionnée avec la page jusqu'à un certain point, puis s'arrête.
Je ne sais pas pourquoi la table se comporte comme ça. Je veux qu'il se contracte comme le reste de la page.
Les lignes noires que vous voyez sont des conteneurs div définis sur "clear: both".
Le code HTML de la table:
<table class="tborder" cellpadding="6" cellspacing="0" border="1" align="center" id="videoevent">
<tbody>
<tr>
<td class="thead" align="center" valign="middle" style="vertical-align:center">
Headline
</td>
</tr><tr>
<td class="alt2" align="center" style="padding:10px;">
<div class="right" style="margin:5px 0px 10px 0px"><span id="user_online_count">refreshing...</span> persons are viewing this page</div>
<div class="left" style="margin:5px 0px 10px 0px">OVERVIEW</div>
<div class="c"></div>
<div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=1">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">Jade</span>
<span class="offline_indicator" id="oi_model_1">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=2">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">User</span>
<span class="offline_indicator" id="oi_model_2">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=3">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">User</span>
<span class="offline_indicator" id="oi_model_3">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=4">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">XXX</span>
<span class="offline_indicator" id="oi_model_4">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=5">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">admin</span>
<span class="offline_indicator" id="oi_model_5">offline</span>
</a>
</div>
<div class="c"></div>
</td>
</tr>
<tr>
<td colspan="2">
Viewers: <span id="users_in_chat">waiting for refresh</span>
</td>
</tr>
</tbody>
</table>
Je ne vois rien dans le style de la table qui pourrait provoquer ce problème:
td[align=center] {
text-align: -webkit-center;
}
td[valign=middle] {
vertical-align: middle;
}
element.style {
}
.thead {
background: #CA1B03;
color: white;
font: normal normal bold 11px/normal tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
td, th, p, li {
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
/*user agent stylesheet*/
td, th {
display: table-cell;
vertical-align: inherit;
}
Inherited from table#videoevent.tborder
.tborder {
color: black;
}
/*user agent stylesheet*/
table {
border-spacing: 2px 2px;
border-collapse: separate;
}
/*Inherited from div.dynwrap.page*/
Style Attribute {
text-align: left;
}
.page {
color: black;
}
/*Inherited from body*/
body {
color: black;
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
pouvez-vous mettre votre code HTML aussi? –
Et votre vrai CSS. Cela ressemble à la sortie d'un inspecteur DOM. – RoToRa
J'ai mis à jour le poste avec la table complète. Cela doit être causé par quelque chose à l'intérieur de la table. Le CSS provient en effet d'un inspecteur DOM. Je sais que vous ne devriez pas utiliser les conteneurs div dans les tables. Mais la table me permet d'avoir facilement deux cases à 50% côte-à-côte (sur une page différente qui utilise le même template). – user478419