Remove unnecessary left space in table

Question

How to get rid of left space so that text remains right aligned ? Unnecessary space is marked red in picture.

<table style="width: 100%">
  <tr>
    <td class="labels"> some text here </td>
    <td> input field </td>
    <td class="labels"> some text here </td>
    <td> input field </td>
  </tr>
  <tr>
    <td class="labels"> text </td>
    <td> input field here </td>
    <td class="labels"> text here </td>
    <td> input field </td>
  </tr>
</table>

EDIT: Is it possible that the <td class=labels> will be adjusted to text length ? So that you don't need to set the fixed length ?

you are using and it take its own space. You can specify the width of the
. Like this some text here — SwapNeil, Mar 31 '16 at 09:24
Yes, it's a possible solution. But what if text length is > 100px ? Is it possible to adjust the table width to text length ? — Tony, Mar 31 '16 at 09:28
you can give the width in "%" too... it will adjust according to the table with. but it will add space on left.. better go width "px" and adjust the size according to text — SwapNeil, Mar 31 '16 at 09:34
Text is written in multiple languages, so you don't know the right width. But I think I'll do it as you propose if there'll be no another solution. — Tony, Mar 31 '16 at 09:37
yes the text is loading dynamically. It's label for input field. — Tony, Mar 31 '16 at 09:40
Possible duplicate of [How to Auto resize HTML table cell to fit the text size](http://stackoverflow.com/questions/5179962/how-to-auto-resize-html-table-cell-to-fit-the-text-size) — Mave, Mar 31 '16 at 09:56
Calculate the each text length whcih dynamically added and add the width for each on basis text length. — SwapNeil, Mar 31 '16 at 10:02

score 1 · Accepted Answer · answered Mar 31 '16 at 10:00

In table cells, the width property only specifies a preferred width. But if you use the default automatic table layout, the cells will grow to be at least the minimum width required by the contents.

So you can use

.labels {
  width: 0;            /* As narrow as possible */
  white-space: nowrap; /* Without inserting line breaks */
}

.labels {
  text-align: right;
  font-weight: bold;
  width: 0;
  white-space: nowrap;
}

<table style="width: 100%">
  <tr>
    <td class="labels"> some text here </td>
    <td> input field </td>
    <td class="labels"> some text here </td>
    <td> input field </td>
  </tr>
  <tr>
    <td class="labels"> text </td>
    <td> input field here </td>
    <td class="labels"> text here </td>
    <td> input field </td>
  </tr>
</table>

score 1 · Answer 2 · answered Mar 31 '16 at 10:11

1

use a combination of width:50% on td and width:auto on .label like this: https://jsfiddle.net/grassog/udhwh388/2/

answered Mar 31 '16 at 10:11

Giuseppe

846
5
10

Remove unnecessary left space in table

2 Answers2