it-swarm.com.de

HTML-Tabellenzellenbreite für verschiedene Zeilen

Mögliches Duplikat:
Problem mit der Tabellenzellenbreite

Ich habe einen Tisch eingerichtet als

<html>
 <body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
    <tr>
        <td width="25%">25</td>
        <td width="50%">50</td>
        <td width="25%">25</td>
    </tr>
    <tr>
        <td width="50%">50</td>
        <td width="30%">30</td>
        <td width="20%">20</td>
    </tr>
</table>
</body>
</html>

Wie erhalte ich die 2 Reihen, um unterschiedliche Zellenbreite zu haben?

21
user544079

Soweit ich weiß, ist das unmöglich und das macht Sinn, da das, was Sie versuchen, gegen die Idee einer tabellarischen Datenpräsentation ist. Sie können die Daten jedoch in mehrere Tabellen einfügen und alle Abstände und Ränder zwischen den Tabellen entfernen, um zumindest sichtbar dasselbe Ergebnis zu erzielen. Etwas in der Art von:

<html>

<head>
  <style type="text/css">
    .mytable {
      border-collapse: collapse;
      width: 100%;
      background-color: white;
    }
    .mytable-head {
      border: 1px solid black;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-head td {
      border: 1px solid black;
    }
    .mytable-body {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-body td {
      border: 1px solid black;
      border-top: 0;
    }
    .mytable-footer {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }
    .mytable-footer td {
      border: 1px solid black;
      border-top: 0;
    }
  </style>
</head>

<body>
  <table class="mytable mytable-head">
    <tr>
      <td width="25%">25</td>
      <td width="50%">50</td>
      <td width="25%">25</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="50%">50</td>
      <td width="30%">30</td>
      <td width="20%">20</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="16%">16</td>
      <td width="68%">68</td>
      <td width="16%">16</td>
    </tr>
  </table>
  <table class="mytable mytable-footer">
    <tr>
      <td width="20%">20</td>
      <td width="30%">30</td>
      <td width="50%">50</td>
    </tr>
  </table>
</body>

</html>

[~ # ~] jsfiddle [~ # ~]

Ich kenne Ihre Anforderungen nicht, aber ich bin mir sicher, dass es eine elegantere Lösung gibt.

20
Till

Eine Lösung wäre, Ihre Tabelle in 20 Spalten mit jeweils 5% Breite zu unterteilen und dann colspan für jede echte Spalte zu verwenden, um die gewünschte Breite zu erhalten:

<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
    <colgroup>
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
        <col width="5%"><col width="5%">
    </colgroup>
    <tr>
        <td colspan=5>25</td>
        <td colspan=10>50</td>
        <td colspan=5>25</td>
    </tr>
    <tr>
        <td colspan=10>50</td>
        <td colspan=6>30</td>
        <td colspan=4>20</td>
    </tr>
</table>
</body>
</html>

[~ # ~] jsfiddle [~ # ~]

28
TokPhobia

Sie können keine Zellen mit willkürlich unterschiedlichen Breiten haben. Dies ist im Allgemeinen ein Standardverhalten von Tabellen aus einem beliebigen Bereich, z. Excel, sonst ist es keine Tabelle mehr, sondern nur eine Textliste.

Zellen können sich jedoch über mehrere Spalten erstrecken, z. B .:

<table>
    <tr>
        <td>25</td>
        <td>50</td>
        <td>25</td>
    </tr>
    <tr>
        <td colspan="2">75</td>
        <td>20</td>
    </tr>
</table>

Abgesehen davon sollten Sie die Verwendung von Stilattributen wie border und bgcolor vermeiden und CSS für diese bevorzugen.

8
roryf

mit 5 Spalten und colspan ist dies möglich ( hier klicken ) (macht aber für mich nicht viel Sinn):

<table width="100%" border="1" bgcolor="#ffffff">
    <colgroup>
        <col width="25%">
        <col width="25%">
        <col width="25%">
        <col width="5%">
        <col width="20%">
    </colgroup>
    <tr>
        <td>25</td>
        <td colspan="2">50</td>
        <td colspan="2">25</td>     
    </tr>
    <tr>
        <td colspan="2">50</td>
        <td colspan="2">30</td>
        <td>20</td>
    </tr>
</table>
6
oezi