why I can't set width in td when `td` wrote in two div while one was set `position: absolute` and another `position: relative`?

Question

Just like the title, I can't set the td width in specific environment like this and you can look the demo here http://codepen.io/quietcoder/pen/ygRVLB?editors=1100

.outer {
  position: relative;
  display: inline-block;
}
.inner {
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <td style="width: 100px">
          <div>123</div>
        </td>
        <td>
          <div>123</div>
        </td>
      </tr>
    </table>
  </div>
</div>

Then, If I write two table, the width in td will work, it's so amaaaaaaaazing!!! And do you knew why this happened?

.outer {
  position: relative;
  display: inline-block;
}
.inner {
  position: absolute;
  white-space: nowrap;
}
.inline-block-box {
  display: inline-block;
}

<div class="outer">
  <div class="inner">
    <div class="inline-block-box">
      <table>
        <tr>
          <td style="width: 100px">
            <div>123</div>
          </td>
          <td>
            <div>123</div>
          </td>
        </tr>
      </table>
    </div>
    <div class="inline-block-box">
      <table>
        <tr>
          <td style="width: 100px">
            <div>123</div>
          </td>
          <td>
            <div>123</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

If you check the div.inner width property in devtool, you can find that the width is very interesting...... Can you explain it?

Possible duplicate of [Why does CSS td width not work?](http://stackoverflow.com/questions/14765817/why-does-css-td-width-not-work) — Benson, Feb 09 '17 at 07:19
@quietcoder You are changing the question now. In the second snippet, the `.inner` div has different CSS than in the first. If you remove that, the tables will collapse again. — Mr Lister, Feb 09 '17 at 07:50
@MrLister Yes, you are right.I find this strange question while I work, and do you knew what's the reason of this? — quietcoder, Feb 09 '17 at 07:56
Hm. No, I don't have any more answers, sorry. I did some more tests, but they were inconclusive. — Mr Lister, Feb 09 '17 at 08:08

score 1 · Answer 1 · answered Feb 09 '17 at 07:09

1

First you have to set width to table, then td will be resized

    .outer {
      position: relative;
      display: inline-block;
    }
    .inner {
      position: absolute;
    }

<div class="outer">
      <div class="inner">
        <table style="width: 200px">
          <tr>
            <td style="width: 100px">
              <div>123</div>
            </td>
            <td>
              <div>123</div>
            </td>
          </tr>
        </table>
      </div>
    </div>

answered Feb 09 '17 at 07:09

L. Vadim

539
3
12

Thank you for your answer, and do you knew what's the reason of this? – quietcoder Feb 09 '17 at 07:20
Because you have position absolute in `.inner`, container it self must to have `width` . then when you adding `width` to table it will fix it – L. Vadim Feb 09 '17 at 07:24

score 0 · Answer 2 · answered Feb 09 '17 at 07:11

Because of your

.inner {
  position: absolute;
}

.outer {
  position: relative;
  display: inline-block;
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <td style="width: 100px; background-color: red;">
          <div>123</div>
        </td>
        <td>
          <div>123</div>
        </td>
      </tr>
    </table>
  </div>
</div>

Mr Lister · Answer 3 · 2017-02-09T07:52:17.243

Inside tables, width will always be taken as a suggestion rather than an absolute.
Now in this case, the width of the table's parent is undetermined (because it is positioned absolutely, and inside a div with inline-block) so the table doesn't know how wide it can be. So it won't make itself wider than its contents.

If the absolute div would have a width specified, then the table would know how wide it could make its cells.

.outer {
  position: relative;
  display: inline-block;
}
.inner {
  position: absolute;
  width:150px; /* added */
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <td style="width: 100px">
          <div>123</div>
        </td>
        <td>
          <div>123</div>
        </td>
      </tr>
    </table>
  </div>
</div>

Or, of course, set the width of the table itself.

score 0 · Answer 4 · answered Feb 09 '17 at 07:20

I think it's a combination of these factors:

outer div is inline-block, which means it has zero width
inner div is limited by the width of the outer one
table has it's own layout management and it tries to fit its container

So unless you set the width of table/inner/outer, the table cell will stay narrow.

score -1 · Answer 5 · answered Feb 09 '17 at 07:18

-1

You can give table border to view width or height of your TD as Like This

.inner {
  position: absolute;
}
.inner {
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <table border='1'>
      <tr>
        <td style="width: 100px">
          <div>123</div>
        </td>
        <td>
          <div>123</div>
        </td>
      </tr>
    </table>
  </div>
</div>

answered Feb 09 '17 at 07:18

Rathod Paresh

221
2
4

i don't understand your problem please tell Clearly What you want? You can set width by style and also td attributes give width as Like Below – Rathod Paresh Feb 09 '17 at 07:43
I'm not the OP, but the problem is that in the original question, the leftmost td is only as wide as its contents, rather than the specified 100px, and the OP's question was why this happens. Your answer changes some things, but not necessarily the things that the OP _can_ change. – Mr Lister Feb 09 '17 at 07:47
if you want to set all TD width = "100px" so use can use css as like this td{ width: "100px"; } – Rathod Paresh Feb 09 '17 at 08:32
Used this Code It Set td you can specify

123

123

– Rathod Paresh Feb 09 '17 at 08:46

why I can't set width in td when `td` wrote in two div while one was set `position: absolute` and another `position: relative`?

5 Answers5