How to set the exact width in table in CSS

Question

I have a text in a table that I want to set the exact width, however, the when I try to set the width is just randomly set a width. The text "In American football..." width is 590px, and when I try to set its width to 300px (like current configuration), its width is 510px (and this stay the same no matter what width I set).

How can I set this to 300px as what I intend?

My code:

    div.page {
        background: #white;
        position: relative;
        width: 1024px;
        height: 768px;
        margin: auto auto;
    }
    .contact_table {
        background-color: #008486;
        width: 1024px;
    }
    .contact_text {
        position: relative;
        text-align: left;
        left: 100px;
        max-width: 300px;
        width: 300px;
        font-family: "Helvetica";
    }

<!DOCTYPE html> 
<div>
    <table class="contact_table">
        <tr>
            <td class="contact_text">In American football, the Tampa Bay Buccaneers defeat the Kansas City Chiefs in the Super Bowl </td>
            <td class="contact_text"> Tom </td>
        </tr>
    </table>
</div>

</div>

Please Check this once https://stackoverflow.com/questions/4185814/fixed-table-cell-width — shweta ramani, Feb 09 '21 at 06:36

score 0 · Answer 1 · edited Feb 09 '21 at 08:19

0

You should set a display: block; or display: inline-block; for your td tag of table.

Take a look:

div.page {
  background: #white;
  position: relative;
  width: 1024px;
  height: 768px;
  margin: auto auto;
}

.contact_table {
  background-color: #008486;
  width: 1024px;
}

.contact_text {
  position: relative;
  text-align: left;
  left: 100px;
  max-width: 300px;
  width: 300px;
  font-family: "Helvetica";
  display: inline-block;
}

<div>
  <table class="contact_table">
    <tr>
      <td class="contact_text">In American football, the Tampa Bay Buccaneers defeat the Kansas City Chiefs in the Super Bowl </td>
      <td class="contact_text"> Tom </td>
    </tr>
  </table>
</div>

edited Feb 09 '21 at 08:19

Daweed

1,419
1
9
24

answered Feb 09 '21 at 06:30

Yasaman.Mansouri

550
1
3
13

1

Hi, it did what I intend. Thanks for that! If it is possible, could you tell me what display tag use for? – Long Doan Feb 09 '21 at 07:11
It is not tag.It is an attribute for tag.The display property specifies the display behavior (the type of rendering box) of an element. – Yasaman.Mansouri Feb 09 '21 at 07:25
If the answer is accepted submit it as answered. – Yasaman.Mansouri Feb 09 '21 at 07:25

score 0 · Answer 2 · answered Feb 09 '21 at 06:55

try this

.contact_table {
        background-color: #008486;
        width: 300px;
    }
    .contact_text {
        position: relative;
        text-align: right;
        left: 100px;
        max-width: 300px;
        width: 300px;
        font-family: "Helvetica";
    }

score 0 · Answer 3 · answered Feb 09 '21 at 07:15

0

It's recommended to set the fixed width to the div container instead of the table element and change display properties of the table elements/subelements as less as possible.

I'd go with

.table__container {
    width: 300px
}

answered Feb 09 '21 at 07:15

Eneas Marín

158
1
5

score -1 · Answer 4 · answered Feb 09 '21 at 06:35

Set .contact_text to display: inline-block;.

div.page {
  width: 1024px;
  margin: auto;
}

.contact_table {
  background-color: #008486;
  width: 100%;
}

.contact_text {
  display: inline-block;
  text-align: left;
  max-width: 300px;
  width: 300px;
  font-family: "Helvetica";
}

<div class="page">
  <table class="contact_table">
    <tr>
      <td class="contact_text">In American football, the Tampa Bay Buccaneers defeat the Kansas City Chiefs in the Super Bowl </td>
      <td class="contact_text"> Tom </td>
    </tr>
  </table>
</div>

Check it in action on Codepen: https://codepen.io/manaskhandelwal1/pen/poNbZYE?editors=1100

How to set the exact width in table in CSS

4 Answers4