18041 sujets

Questions générales et questions de débutants

Imposition d'une largeur global du tableau en pixel.

Bonjour je ne suis pas un expert en CSS et HTML.

J'aimerais mettre une largueur fixe pour ce tableau. Par exemple : 300px J'ai essayer de le mettre dans le tableau ou bien dans le .datagrid table mais je n'y arrive pas.

Petite question supplémentaire; Comment puise-je changer la couleur de ma deuxième entête ? (Branche/PCODE/LONGUEUR... etc) J'aimerais utilisé le même style mais en vert : 0DFF5C
J'ai essayer de faire un autre style CSS de .datagrid table thead mais ca ne semble pas fonctionner.

Merci beaucoup


<style type="text/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 #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.datagrid table td, 

.datagrid table th {
	padding: 3px 10px;
}

.datagrid table thead th{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699;
color:#FFFFFF;
font-size: 15px;
font-weight: bold;
border-left: 1px solid #0070A8;
} 

.datagrid table thead th:first-child{
border: none;
}

.datagrid table tbody td {
color: #00496B;
border-left: 1px solid #E1EEF4;
font-size: 12px;
font-weight: normal;
}

.datagrid table tbody .alt td {
background: #E1EEF4;
color: #00496B;
}

.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 #006699;
	background: #E1EEF4;
	} 
.datagrid table tfoot td {
	padding: 0;
	font-size: 12px 
	} 
.datagrid table tfoot td div{
	padding: 2px;
}
</style>



<div class="datagrid">

<table>
<thead>
   <tr>
      <th colspan="3">Point Bas</th>
      <th colspan="3">Point Haut</th>
   </tr>
   <tr>
      <th>X</th>
      <th>Y</th>
      <th>Z</th>
      <th>X</th>
      <th>Y</th>
      <th>Z</th>
   </tr>
</thead>
<tbody>
   <tr>
      <td>344281.643</td>
      <td>5318733.556</td>
      <td>851.51</td>
      <td>344296.498</td>
      <td>5318732.523</td>
      <td>851.908
</tbody>
<div class="datagrid">
   <table>
      <thead>
         <tr>
            <th>Branche</th>
            <th>Pcode</th>
            <th>Long.</th>
            <th>Pente</th>
            <th>Date</th>
            <th>Fichier</th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td colspan="8">
               <div id="no-paging">&nbsp;</div>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>Br. Q1</td>
            <td>DR</td>
            <td>14.9</td>
            <td>2.67</td>
            <td>2014-02-11</td>
            <td>20211TQCDRYP</td>
         </tr>
      </tbody>
   </table>
</div>
Bonjour,
Pour définir une largeur fixe tu as 2 solutions, soit tu l'indiques dans ta balise tableau <table width="300" > soit en css : table { witdh:300px;} Par contre il faut enlever "width:100%; "dans ton css.

Pour ta deuxième question, si tu veux avoir deux styles de tableau différent donnent leur des ID dans ton CSS
un premier style :
table#datagrid { ton style;}
table#datagrid thead th { ton style;} 
table#datagrid tbody td { ton style;}
ect..
et un deuxieme :
table#datagridvert { ton style;}
table#datagridvert thead th { ton style; background: #0DFF5C;} 
table#datagridvert tbody td { ton style;}
ect..
Ensuite tu appelles le style dans ta page html comme suit : <table id="datagridvert">

Je te conseille de faire des feuilles css a part que tu appeleras sur ta page html en placant un lien (<link rel="stylesheet" href="css/style.css">) entre les balises <head> et </head>.
Modifié par edasong (17 Apr 2014 - 22:38)
Sujet clos
Aller à