CODEWITHSUNDEEP
css
InPanic
InPanic

Reputation: 165

CSS justify Text in Table

it is a question which has been asked already a few times, but none of the answers seem to work for me.

I have a table, in each Datarow I have with a placeholder for a radiobutton and a text. All the lines should be text-align. justify. because it is a story, all the lines should end at the same width. I tried to use td:first-child like you see it below, and also to use class: line. Somehow the table structure seems to override the justify statement.

Help is as always appreciated

td:first-child {
  font-size: 20px;
  hyphens: auto;
  text-align: justify
}
<h1 style="text-align: center; font-size: 24px">Header</h1>
<table>
  <tr>
    <td class="line">%SM02_01a% I had heard about her sister ship. It was called the “Titanic” and she had </td>
  </tr>
  <tr>
    <td class="line">%SM02_02a% sunken last year. That was it what let me feel fear, although they also promised that this ship </td>
  </tr>
  <tr>
    <td class="line">%SM02_03a% the “Olympic”, was even safer than her sunken predecessor</td>
  </tr>
</table>

Upvotes: 0

Views: 1141

Answers (3)

AndMM
AndMM

Reputation: 21

If what I intend is correct, you want all the lines to end at the same width.

But even if you justify, the lenght of the line will affect your output. In this case, you need put the Justify style to the last line. Here's a fiddle:

Fiddle

Hope this help :)

Upvotes: 0

JayDee
JayDee

Reputation: 33

IN your code, you are applying the style to each table data element. So the text is aligned correctly for each .

You can see this is you put it all into one;

<h1 style="text-align: center; font-size: 24px">Header</h1>
<table>
<tr><td class="line">%SM02_01a% I had heard about her sister ship. It was called the “Titanic” and she had 
%SM02_02a% sunken last year. That was it what let me feel fear, although they also promised that this ship
%SM02_03a%  the “Olympic”, was even safer than her sunken predecessor</td></tr>
</table>

If you want to keep the rows then try adding the style to a parent tag or add all the text into a paragraph with line spaces.

Upvotes: 0

Sunil Chaudhary
Sunil Chaudhary

Reputation: 4743

You need to use text-align-last: justify; for the last line and it should work fine.

Have updated the snippet for you:

td:first-child {
  font-size: 20px;
  hyphens: auto;
  text-align: justify;
  text-align-last: justify;
}
<h1 style="text-align: center; font-size: 24px">Header</h1>
<table>
  <tr>
    <td class="line">%SM02_01a% I had heard about her sister ship. It was called the “Titanic” and she had </td>
  </tr>
  <tr>
    <td class="line">%SM02_02a% sunken last year. That was it what let me feel fear, although they also promised that this ship </td>
  </tr>
  <tr>
    <td class="line">%SM02_03a% the “Olympic”, was even safer than her sunken predecessor</td>
  </tr>
</table>

But you need to be careful as not all the browsers support this feature.
Read here: https://caniuse.com/#search=text-align-last for the browser compatibility of this property

Upvotes: 2

Related Questions