1

HTML:

<table id="l2-menu-table">
    <tr>
        <td>
            <span class="dayname">Måndag</span>
            <p>Ekologisk ärtsoppa med kravmärkt fläsk från Malma Gård. Pannkakor med ekologisk vispgrädde & hemkokt jordgubbssylt</p>
        </td>
        <td>
            <span class="dayname">Tisdag</span>
            <p>Ekologisk ärtsoppa med kravmärkt fläsk från Malma Gård. Pannkakor med ekologisk vispgrädde & hemkokt jordgubbssylt</p>
        </td>
        <td>
            <span class="dayname">Onsdag</span>
            <p>Ekologisk ärtsoppa med kravmärkt fläsk från Malma Gård. Pannkakor med ekologisk vispgrädde & hemkokt jordgubbssylt</p>
        </td>
    </tr>
</table>

CSS:

#l2-menu-table {
    width: 100%;
    padding: 36.85px;
    font-size: 11px;
    line-height: 13px;
    text-transform: uppercase;
    font-family: OratorStd;
    word-wrap: break-word;

}

#l2-menu-table td {
    width: 33.33333333333333%;
}

It almost works as it should, but it has more padding on the right, is it possible to remove the extra on the right and to increase it between the middle, if so HOW?

enter image description here

user3121056
  • 339
  • 3
  • 12

1 Answers1

2

Not sure what you mean by more padding on the right. Seems even to me.

Looks like if you want it to be perfectly even you could justify the text. It probably just looks like there's more cause all of the text does not stretch all the way to the right like it does on the left side.

text-align: justify;

Hope that's what you're looking for.

Omgabee
  • 97
  • 10
  • I agree, the text does appear evenly distributed. In addition to justifying you could temporarily add borders to see that. Also, to increase the spacing between cells see this post: http://stackoverflow.com/a/3209434/264628. – BrianS Oct 21 '14 at 01:47