PHP/CSS: Fix the table, td size, although the text at td is too long

Question

I have an issue with my table. I already set the table width and also the th width. But when the td displays data from the database, the td size is not as the same as set at th. The td size follows which td has long text. I want to make all the td fixed according to the width that I set. Could anyone guide me how to achieve what I am trying to do? Below is the code:

      echo "<table class='table table-bordered' width = '100%'>";
      echo "<thead>";
        echo "<tr>";
            echo "<th width = '5%'>#</th>
            <th width = '15%'>Requester</th>
            <th width = '5%'>Factory</th>
            <th width = '20%'>Room</th>
            <th width = '25%'>Purpose</th>
            <th width = '10%'>Status</th>
            <th width = '20%'>Action</th>
          </tr>
        </thead>
        <tbody >";

        $query = $conn->query("SELECT * FROM booking LEFT JOIN room ON booking.Room_ID = room.Room_ID WHERE Admin_email = '$Email' AND EndTime > GETDATE() ORDER BY booking.Book_No DESC");
        while($row = $query->fetch(PDO::FETCH_ASSOC)){
        $status=$row['Book_Status'];
        if($status=="Approve")
        {
            $color="color:green";
        }
        else if($status=="Pending")
        {
            $color="color:blue";
        }
        else 
        {
            $color="color:red";
        }
          echo "<tr>";
            echo "<td>" . $row['Book_No'] . "</td>";
            echo "<td>" . $row['Requested_by'] . "</td>";                                              
            echo "<td>" . $row['Fac_ID'] . "</td>";
            echo "<td>" . $row['Room_Desc'] . "</td>";
            echo "<td>" . $row['Meeting_Description'] . "</td>";   
            echo "<td style='$color'><strong>" . $status ."</strong></td>";
            echo "<td>";
            echo "<a class='btn-view btn-primary btn-sm' href='../../view_booking/admin/view_booking.php?Book_No=". $row['Book_No'] ."' data-toggle='tooltip'>View</a>";
            echo "</td>";
            echo "</tr>";
        }

        echo "</tbody>";
      echo "</table><br>";  

Answer 1

You can control this overflow by using css property overflow

Example with overflow: scroll:

td{
  width: 100px;
  overflow: scroll;
  }

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>    
  </tr>

  <tr>
    <td>
      Detail 1
    </td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </td>
  </tr>

  <tr>
    <td>
      Detail 2
    </td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </td>
  </tr>
</table>

Example with overflow: hidden

  td{
  width: 100px;
  overflow: hidden;
  }

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>    
  </tr>

  <tr>
    <td>
      Detail 1
    </td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </td>
  </tr>

  <tr>
    <td>
      Detail 2
    </td>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </td>
  </tr>
</table>

Second, for suppose if you dont have space in your content having dummy content like BLAAABLAAABLAAABLAAA then you can use CSS word-wrap property.

According to W3Schools:

you can use following properties with overflow: visible|hidden|scroll|auto|initial|inherit;

Reference