CSS를 사용하여 표 셀에서 오른쪽 정렬

CSS를 사용하여 표 셀에서 오른쪽 정렬

---

나는 이와 같은 오래된 고전적인 코드를 가지고있다.

<td align="right">

셀의 내용을 올바르게 정렬합니다. 이 셀에 2 개의 버튼을 넣으면 셀의 오른쪽 사이트에 버튼이 나타납니다.

그러나 CSS로 리팩토링했지만 오른쪽 정렬과 같은 것은 없습니다. 텍스트 정렬이 표시됩니다. 동일합니까?

---

사용하다

text-align: right

텍스트 정렬 CSS 속성은 텍스트와 같은 인라인 내용이 부모 블록 요소에서 정렬되는 방법을 설명합니다. text-align은 블록 요소 자체의 정렬을 제어하지 않으며 인라인 내용 만 제어합니다.

보다

텍스트 정렬

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

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

---

지금 나를 위해 일한 것은 다음과 같습니다.

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>

다음 바이올린을 참조하십시오.

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

---

CSS3의 'n-child'셀렉터를 잊지 마십시오. 텍스트를 오른쪽에 맞추려는 열의 색인을 알고 있다면 지정할 수 있습니다.

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

큰 테이블이있는 경우 추가 마크 업을 많이 절약 할 수 있습니다!

여기에 바이올린이 있습니다 .... https://jsfiddle.net/w16c2nad/

참고 URL : https://stackoverflow.com/questions/1906469/align-right-in-a-table-cell-with-css