Table - La largeur n'est pas respectée quand elle est donnée en pourcentage

**Naoris** · 09/07/2013, 16h44

Bonjour,

J’espère ne pas faire doublon avec mon problème.

Dans le cadre de mon travail, je dois modifier une page web qui est construite uniquement avec des tables (ce que je ne dois pas changer d'ailleurs) et je me retrouve devant un problème que je n'arrive pas a résoudre.

Voici le code qui représente mon souci (j'ai juste enlevé quelques balises inutiles) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
  <HEAD>
    <TITLE>Test Table Width Issue</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
  </HEAD>
  <BODY>
	<table id="Table_1" width="100%" align="left">
		<tr>
			<td width="50%"></td>
			<td width="50%">
				<fieldset align="left">
					<legend>Chart</legend>
					<table id="Table_2" height="100">
						<tr>
							<td >
								<div id="div_chart" align="center"></div>
								<script type="text/javascript">
                                                                        d = document.getElementById('div_chart');
                                                                        d.style.width="1000px";
                                                                </script>
							</td>
						</tr>
					</table>
				</fieldset>
			</td>
		</tr>
	</table>
  </BODY>
</HTML>

Si le navigateur fait 1680px de large comme pour moi au boulot, la Table_1 est coupée en deux colonnes/cellules qui sont censées faire 840px chacune (50%).

La Table_2 est composée d'un div qui fait 1000px, et donc les comportements que j'envisageais étaient (je ne suis pas très bon en HTML, donc je ne savais pas trop à quoi m'attendre...) :

l'apparition d'une scrollbar dans la deuxième cellule
que le div soit coupé pour ne pas depasser les 840px
que le div dépasse simplement de la case (une sorte d'overlaps)

Finalement, la deuxième cellule de la Table s'agrandit aux dépens de la première, et mon problème est que je ne veux vraiment pas que cela se produise.

Quelqu'un a-t-il une idée d'une façon de régler ce souci ?

Je suis désolé si c'est une erreur qui est connue et bête.
Quoiqu'il en soit, merci d'avance pour votre lecture et votre aide.

Naoris

**Bovino** · 09/07/2013, 17h00

Regarde du côté de la propriété CSS table-layout.

**Naoris** · 09/07/2013, 17h06

Merci beaucoup !

C’était exactement ce que je cherchais, il me suffisait de mettre l'attribut CSS table-layout à fixed.

Encore merci pour votre aide

Naoris

Table - La largeur n'est pas respectée quand elle est donnée en pourcentage [HTML 4.0]

HTML

Discussions similaires

Partager

Partager