zentrieren Sie eine Zeile mit einem <td> Element, wenn andere Zeile hat viele <td>

Question

Ich möchte ein <td> Element in einer Zeile zu zentrieren, wenn andere Zeile hat viele <td> Elemente. Aber das Element <td> der ersten Zeile befindet sich immer in der ersten Spaltenposition und es bewegt sich nicht in die Mitte.

Hier ist mein Code Beispiel:

<table border="1"> 
 
    <tr> 
 
    <td>Problem</td> 
 
    </tr> 
 
    <tr> 
 
    <td>65</td> 
 
    <td rowspan="3" width="100px">66</td> 
 
    <td>67</td> 
 
    </tr> 
 
    <tr> 
 
    <td>75</td> 
 
    <td>77</td> 
 
    </tr> 
 
    <tr> 
 
    <td>85</td> 
 
    <td>87</td> 
 
    </tr> 
 
    <tr> 
 
    <td>85</td> 
 
    <td>86</td> 
 
    <td>87</td> 
 
    </tr> 
 
</table>

und hier ist das Ergebnis, ich möchte das ein Element in der Mitte zu erhalten, ohne anderes Element, und es soll gleiche Breite nehmen und Höhe der ersten Säulenelemente. Bilder sind hier -

Answer 1

Es scheint, dass Sie eine Beschriftung statt einer Zelle wollen:

td { 
 
    border: 1px solid; 
 
}

<table> 
 
    <caption>Problem</caption> 
 
    <tr> 
 
    <td>65</td> 
 
    <td rowspan="3" style="width: 100px">66</td> 
 
    <td>67</td> 
 
    </tr> 
 
    <tr> 
 
    <td>75</td> 
 
    <td>77</td> 
 
    </tr> 
 
    <tr> 
 
    <td>85</td> 
 
    <td>87</td> 
 
    </tr> 
 
    <tr> 
 
    <td>85</td> 
 
    <td>86</td> 
 
    <td>87</td> 
 
    </tr> 
 
</table>

Answer 2

<table border="1"> 
 
     <tr align="center"> 
 
      <td colspan="3" align="center">Problem</td> 
 
     </tr> 
 
     <tr> 
 
      <td>65</td> 
 
      <td rowspan="3" width="100px" align="center">66</td> 
 
      <td>67</td> 
 
     </tr> 
 
     <tr> 
 
      <td>75</td> 
 
      <td>77</td> 
 
     </tr> 
 
     <tr> 
 
      <td>85</td> 
 
      <td>87</td> 
 
     </tr> 
 
     <tr> 
 
      <td>85</td> 
 
      <td align="center">86</td> 
 
      <td>87</td> 
 
     </tr> 
 
    </table>

Answer 3

Die Menge der Spalten in einer Tabelle werden durch die maximale Anzahl der Spalten in einer bestimmten Zeile einer Tabelle definiert. Da Ihre Tabelle 3 Spalten verwendet, passt die Zeile mit nur einer einzigen td Zelle nicht.

Um dies zu beheben, ist das colspan Attribut was Sie wollen.

Da Sie jedoch die Zelle in der Größe anderer in derselben Spalte behalten möchten, verwenden Sie dazu leere Elemente td. Beispiel unten:

table, 
 
td { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td></td> 
 
    <td>1 column</td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>1 column</td> 
 
    <td>1 column</td> 
 
    <td>1 column</td> 
 
    </tr> 
 
</table>

Answer 4

Wenn ich Ihre Frage richtig bin Interpretieren Sie nicht wollen, das <td> Element die gesamte Zeile zu überspannen. Stattdessen möchten Sie, dass es in der Spalte "centre" positioniert wird.

Wenn Sie die Dimensionen im Voraus kennen, können Sie einfach leere <td> s davor erstellen und sie ausblenden.

table { empty-cells: hide; }

<table border="1"> 
 
    <tr> 
 
    <td></td> <!-- Empty TD for positioning --> 
 
    <td>Problem</td> 
 
    </tr> 
 
    <tr> 
 
    <td>65</td> 
 
    <td rowspan="3" width="100px">66</td> 
 
    <td>67</td> 
 
    </tr> 
 
    <tr> 
 
    <td>75</td> 
 
    <td>77</td> 
 
    </tr> 
 
    <tr> 
 
    <td>85</td> 
 
    <td>87</td> 
 
    </tr> 
 
    <tr> 
 
    <td>85</td> 
 
    <td>86</td> 
 
    <td>87</td> 
 
    </tr> 
 
</table>

Answer 5

<table border="1"> 
 
    <tr> 
 
    <td style="border:5px"></td> 
 
    <td>56</td> 
 
    <td style="border:5px"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>65</td> 
 
    <td>66</td> 
 
    <td>67</td> 
 
    </tr> 
 
    <tr> 
 
    <td>75</td> 
 
    <td>66</td> 
 
    <td>77</td> 
 
    </tr> 
 
    <tr> 
 
    <td>85</td> 
 
    <td>66</td> 
 
    <td>87</td> 
 
    </tr> 
 
</table>

, wenn Sie Spalte möchten, dann können Sie diesen Stil Teil entfernen und das ist das Ergebnis: