Ширина таблицы td фиксирована до th

Question

Я получаю данные с помощью ajax в PHP. моя ширина таблицы не привязана к ширине таблицы. Как я могу управлять шириной TD в CSS.

Это скрипт

HTML

<table id="example" class="table">
    <thead>
      <tr>
        <th>Category</th>
        <th width="20%">Name</th>
        <th width="20%">Father Name</th>
        <th width="60%">Notes</th>
      </tr>
    </thead>
  </table>

JS

var mainTable = $('#example').DataTable({
  'ajax': 'fetch.php',
    'order': []
});

PHP

<?php
require_once("config.php");

$query = "SELECT name, fname, notes FROM lab_examinations";
$stmt = $db->prepare($query);
$stmt->execute();

$result = array('data' => array());
while($row = $stmt->fetch(PDO:: FETCH_OBJ) ) {
        $name = $row->name;
        $fname = $row->fname;
        $notes = $row->notes;
    $result['data'][] = array($name, $fname, $notes);   
 }
echo json_encode($result);

Answer 1

Вы можете сделать это с помощью CSS, как это

CSS

table tbody tr{
width: auto;
}