CODEWITHSUNDEEP
htmlcss
xms
xms

Reputation: 437

Getting HTML span element to use the rest of td's width

I would like the span element width to be the rest of td's width.

Here is a very simple example. In other words, now I have some code, but the span element will be too wide. It will go over the latest td element.

Here is the HTML code which has some basic CSS code, too. I'm not allowed to modify the basic strucuture of this table. All I want to do is modifying my span element.

<table style="width:100%;">
  <tr>
    <td style="width:30px;">1</td>
    <td><a href="go.htm">Go</a> <span style="display:inline-block;width:100%;background-color:black;">to...</span></td>
    <td>#</td>
  </tr>
</table>

How should I modify the span element to get it use the rest of the td but no more?

Upvotes: 1

Views: 1264

Answers (2)

xms
xms

Reputation: 437

Here is my own solution to my problem. This is the best way which I was able to find out.

<table style="width:100%;">
  <tr>
    <td style="width:30px;">1</td>
    <td style="padding-left:65px;"><a href="go.htm" style="position:absolute;left:45px;margin-top:-2px;">Go</a> to...</td>
    <td>#</td>
  </tr>
</table>

Upvotes: 0

Chiller
Chiller

Reputation: 9738

this could be achieved using flex box

td div {
  display: flex;
}

td span {
  flex-grow: 1;
}
<table style="width:100%;" border=1>
  <tr>
    <td style="width:30px;">1</td>
    <td>
      <div>

        <a href="go.htm">Go</a> <span style="background-color:black;">to...</span>
      </div>
    </td>
    <td>#</td>
  </tr>
</table>

Upvotes: 2

Related Questions