wyrównaj do prawej komórki tabeli za pomocą CSS

128

Mam taki stary klasyczny kod

<td align="right">

który robi to, co mówi: prawidłowo wyrównuje zawartość w komórce. Jeśli więc wstawię 2 przyciski w tej komórce, pojawią się one po prawej stronie komórki.

Ale potem refaktoryzowałem to do CSS, ale nie ma czegoś takiego jak wyrównanie do prawej? Widzę wyrównanie tekstu, czy to to samo?

css

— Michel
źródło

154

Posługiwać się

text-align: right

Właściwość CSS wyrównywania tekstu opisuje, w jaki sposób zawartość w wierszu, taka jak tekst, jest wyrównana w swoim nadrzędnym elemencie bloku. text-align nie kontroluje samego wyrównania elementów blokowych, tylko ich zawartość w wierszu.

Widzieć

wyrównywanie tekstu

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

— rahul
źródło

5

czy <input type = "button"> jest elementem blokowym, ponieważ nie jest on wyrównany prawidłowo?

— Michel,

1

To zależy. Mam akapit, który jest blokiem, wewnątrz komórki tabeli (wyświetlacz css: tabela-komórka) i jeśli nadam temu akapitowi szerokość 100%, zacznie on uwzględniać wyrównanie tekstu do prawej. Zakładam, że określenie szerokości nie zawsze jest najlepszą rzeczą.

— Costa

3

Rozumiem więc, że właściwość text-alignnie jest dobrze nazwana, jeśli dotyczy przycisków i kontrolek, a także tekstu. Może należało to nazwać content-align?

— Ben

3

Michel: ustaw element bloku na inline-block, np .: td input {display: inline-block; }

— shalamos

1

lub ja działa tylko float: right lub stare dobre align = "right". wtf?

— Ton Škoda

7

To, co teraz zadziałało, to:

CSS:

.right {
  text-align: right;
  margin-right: 1em;
}

.left {
  text-align: left;
  margin-left: 1em;
}

HTML:

<table width="100%">
  <tbody>
    <tr>
      <td class="left">
        <input id="abort" type="submit" name="abort" value="Back">
        <input id="save" type="submit" name="save" value="Save">
      </td>
      <td class="right">
        <input id="delegate" type="submit" name="delegate" value="Delegate">
        <input id="unassign" type="submit" name="unassign" value="Unassign">
        <input id="complete" type="submit" name="complete" value="Complete">
      </td>
    </tr>
  </tbody>
</table>

Zobacz następujące skrzypce:

http://jsfiddle.net/Joysn/3u3SD/

— Joysn
źródło

6

Nie zapomnij o selektorze nth-child w CSS3. Jeśli znasz indeks kolumny, w której chcesz wyrównać tekst do prawej strony, możesz po prostu określić

table tr td:nth-child(2) {
    text-align: right;
}

W przypadku dużych tabel może to zaoszczędzić wiele dodatkowych znaczników!

oto skrzypce dla ciebie .... https://jsfiddle.net/w16c2nad/

— Nie znaleziono pakietu 404
źródło

Świetnie: najłatwiejsze i najczystsze rozwiązanie jakie widziałem.

— ncrypticus

2

Jak umieścić elementy blokowe w `td`komórce

Udzielone odpowiedzi świetnie radzą sobie z wyrównaniem tekstu w tdkomórce do prawej .

Może to nie być rozwiązanie, gdy chcesz wyrównać element blokowy zgodnie z komentarzem w zaakceptowanej odpowiedzi. Aby to osiągnąć za pomocą elementu blokowego, uznałem za przydatne użycie marginesów;

ogólna składnia

selector {
  margin: top right bottom left;
}

uzasadnić dobrze

td {
  /* there is a shorthand, TODO! 🙂 */
  margin: auto 0 auto auto;
}

uzasadnić środek

td {
  margin: auto auto auto auto;
}

/* or the short-hand */
margin: auto;

wyrównaj do środka

td {
  margin: auto;
}

Przykład JS Fiddle

Alternatywnie możesz tdwyświetlić zawartość, inline-blockjeśli jest to opcja, ale może to zniekształcić pozycję jej elementów podrzędnych.

— John Mutuma
źródło