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>";

add the size information in your TD tag ? You can use too word-wrap css to made it. Other thing, please take a look to prepare request to avoid SQL Injection https://www.php.net/manual/en/pdo.prepare.php & https://www.owasp.org/index.php/SQL_Injection — Inazo, Oct 30 '19 at 16:29
I think you can find a solution here. https://stackoverflow.com/a/1883702/6578815 — Olawale, Oct 30 '19 at 16:34

devpro · Accepted Answer · 2019-10-30T16:43:04.900

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:

Reference

`overflow: scroll` is all well and good, but it'll always show the bars, `overflow: auto` will show where needed when needed — Can O' Spam, Oct 30 '19 at 16:37
@SomeRandomPerson: agreed thats way i added some reference where overflow: auto already available with example. — devpro, Oct 30 '19 at 16:38

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

1 Answers1