Mechanizm, który sprawi, że pola td w tabeli nie będą wyświetlać się w jednej linii

0

Czy ktoś potrafi mnie na kierować jak sprawić aby pola td w tabeli nie wyświetały się w jednej tej samej linii? Ponieważ jak np dam dla pierwszego elementu td padding: 50px to automatycznie inne elementy td wt ym samym wierszu ustawiają ten padding i są wyświetlane w linii z tym pierwszym elementem td.

1

jak np dam dla pierwszego elementu td padding: 50px to automatycznie inne elementy td wt ym samym wierszu ustawiają ten padding i są wyświetlane w linii z tym pierwszym elementem td.

Mogę się mylić, ale chyba tabele w cssie domyślnie mają wycentrowanie w poziomie, ponieważ z założenia jest to spójna konstrukcja (w przeciwieństwie do elementów blokowych i inline-blokowych) każdy padding rozszerza pozostałe komórki.
W Twoim przypadku musisz po prostu nadać np. całej tabeli table td wycentrowanie takie jakie chcesz poprzez vertical-align (np. top/bottom), dzięki czemu elementy domyślnie będą wyrównywane do góry albo dołu komórek.
Wszystko zależy od tego co chcesz osiągnąć.

0

Domyślnie zawartość komórek tabeli jest centrowana w pionie, ale można to zmienić, np. definiując styl dla komórek zadanej klasy, który to wyrównanie zmieni. Możesz bez problemu skorzystać z text-align oraz vertical-align.

Niżej bardzo prosty przykład:

<html>
<body>

<table>
  <tr>
    <td class="left up">lorem</td>
    <td class="left">ipsum</td>
    <td class="left down">dolor</td>
    <td class="left">sit</td>
    <td class="left up">amet</td>
  </tr>
  <tr>
    <td>lorem</td>
    <td>ipsum</td>
    <td>dolor</td>
    <td>sit</td>
    <td>amet</td>
  </tr>
  <tr>
    <td class="right down">lorem</td>
    <td class="right">ipsum</td>
    <td class="right up">dolor</td>
    <td class="right">sit</td>
    <td class="right down">amet</td>
  </tr>
</table>

</body>
</html>

table{
  border-spacing: 1px;
  text-align: center;
}

tr{
  height: 75px;
}

td{
  background-color: #808080;
  width: 75px;
  padding: 10px;
}

.up{
  vertical-align: top;
}

.down{
  vertical-align: bottom;
}

.left{
  text-align: left;
}

.right{
  text-align: right;
}

Rezultat:

table.png

Do potestowania: https://jsfiddle.net/6xgyun1y/4/

1 użytkowników online, w tym zalogowanych: 0, gości: 1