Html table reduce white space between columns-CodePudding

<table>
  <thead id="main-table-head">
    <tr id="aa">
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>21 Oct 2022</td>
      <td>dfd</td>
      <td>lk;</td>
      <td>hjk</td>
      <td>hjk</td>
      <td>hjkh</td>
    </tr>
    <tr>
      <td>21 Oct 2022</td>
      <td>dfd</td>
      <td>lk;</td>
      <td>hjk</td>
      <td>hjk</td>
      <td>hjkh</td>
    </tr>
    <tr>
      <td>21 Oct 2022</td>
      <td>dfd</td>
      <td>lk;</td>
      <td>hjk</td>
      <td>hjk</td>
      <td>hjkh</td>
    </tr>
    <tr>
      <td>21 Oct 2022</td>
      <td>dfd</td>
      <td>lk;</td>
      <td>hjk</td>
      <td>hjk</td>
      <td>hjkh</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td className="footer-td">5866.23</td>
      <td className="footer-td">456</td>
      <td className="footer-td">5688</td>
      <td className="footer-td">543</td>
      <td className="footer-td">86</td>
    </tr>
    <tr>
      <td>
        <h5 className="total-label">Grand Total</h5>
      </td>
      <td>5866.23</td>
      <td>456</td>
      <td>5688</td>
      <td>543</td>
      <td>86</td>
    </tr>
  </tfoot>
</table>

Here is my Html table. it contains some data. I am working in react project. before mapping data to table body , I designed main structure of the table. when I adding long length data , "B" column went to right-side. So I want reduce the white space between "A" column and "B" column. I tried so many ways. especially cellspacing was used. It did not work. please some one help me. white space is depend on where we write at A column things. but it should not be happened to my task.

CodePudding user response：

You can add custom spaces in th tags Such as :

<th width="100px">A</th>
<th width="20%">A</th>

<th width="pixels|%">

CodePudding user response：

Due to the large number of problems with tables, it is customary not to use them. It will be better to use an array of objects and visualize it with a "map".