Unable to change table item width

Question

I post a screenshot of the corresponding item. You should be able to see, I apply styling on individual elements, removing all margins, indents and setting the width to 0px. No matter what I do, this table data element is abnormally large. I want to significantly reduce its width, but it will not listen to me. I have a feeling that this is some kind of obscure HTML algorithm that I don't know anything about, but can't say. Any ideas?

Update: The answer was that HTML would make sure that the data elements of the table occupy the entire width of the table, regardless of whether you are trying to narrow individual elements (in fact, it was some kind of strange algorithm or HTML functionality). However, I will accept the answer below because it is so thorough that it should cover other possible problems that people may encounter.

Answer 1

There is some uncertainty about how the width of the table cell ( <td> ) is determined , since the official documentation is unclear and allows certain behavior to be determined by the browser . But here are a few features that seem stable across the entire spectrum of browsers.

Control the width of the cells of the HTML <td> table

• Single cell table
  In a table consisting of one cell - ndash; in other words, a table with one column and one row - where the width was not explicitly defined in the <table> element, the width can be controlled directly by the <td> element.

  This will not work (the td rule will be ignored):

   table { width: 100%;} td {width: 300px;} 

  width: 300px fails because the <table> element has a specific width.

  However, this will work:

   /* table { width: 100%;} */ td {width: 300px;} 

  Demo

---

2. Multi-cell table column
   To set the width of a table cell in a column with multiple cells, you need to adjust the entire column. Any widths assigned to a single <td> will be ignored. Just adjust the width of the table to adjust the width of the <td> in the column.

   Demo

   ---

   3. A table with multiple columns and multiple rows
      To set the width of a table with multiple columns and rows, the Table Column Element ( <col> ) is ideal because it targets individual columns.

      Demo

      ---

The problem described in the question includes a table cell that does not accept a shorter width assignment. The first implementation here is that the table cell expands by default to fill 100% of the column width ( learn more about the default width <td>). A method of reducing the width of this cell is described above.

HOWEVER, I suspect that in some cases a person who wants to reduce the width of a table cell is actually trying to reduce the width of the content inside the cell (for example, an image or form input). In these cases, setting up the table may not be necessary. All that is required is to adjust the width of the content itself or its container ( div , span , figure , etc.).

In this image, the width of the table cells is 100%, but the width of the input fields changes.

Demo

---

Column join

If you really need to reduce the width of one cell inside a column of several cells, then you can consider colspan . colspan can change columns to make cells wider. Cells without colspan assigned will be shorter and appear even shorter when their neighboring cells are hidden.

In this image, display: none is applied to the lower right cell of this two-column table.

Demo

---

So, in the case of your table cell that does not budge, consider adjusting the width of the <table> element (if it is one column table), assign and edit the <col> element (if it is several -column table), adjust the width of the content directly ( if this is the only item you want to adjust) or use colspan .

Sorry, I can’t clarify the exact solution in your case. No code was provided for the review. But hopefully one of these methods will help you.