How can I control the width of a td tag?

Discussion in 'CSS' started by SoftLink, Dec 29, 2020.

0
  1. #1
    SoftLink, Dec 29, 2020 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,789
    Likes Received:
    4,528
    Best Answers:
    123
    Trophy Points:
    665
    #2
    I simplified your html to this
    <div id="divMain">
  <table>
    <tr> <td>BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
      <td>blah</td>
    </tr>
  </table>
</div>
    HTML:
    and your css to this
    #divMain {
  width: 75vw;
  max-width: 75vw;
  border: 1px solid red;
  padding: .5vw;
}
table {
  display: block;
  width: 98%;
  max-width: 98%;
  border: 2px solid green;
}

td {
  width: 50%;
  max-width: 50%;
  overflow: hidden;
  line-break: anywhere;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  border: 1px dashed pink;
  padding: .5vw;
}
    Code (CSS):
    and it all looks great

    You will be able to take out the second column and expand the width if that's what you need.
     
    sarahk, Dec 29, 2020 IP
  3. SoftLink

    SoftLink Active Member

    Messages:
    129
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Thanks. That's an awful lot just to mandate a width on a td tag.
    It didn't exactly work either.
    You set the width to 50%;
    When I deleted the 2nd td tag the width went back to 100% (but not over this time).

    I suppose it was just too much to ask the css dev team to allow us to control the width of a td tag.
    https://codepen.io/SLSCoder/pen/yLapGvB?editors=1111
     
    SoftLink, Dec 29, 2020 IP