I attempted to create a striped table with 5 columns.
The desired column sizes are:
10% width --- 10% width --- 40% width --- 20% width --- 20% width
However, my current code is not achieving the correct widths (the 'description' column does not appear as 40% width).
https://i.stack.imgur.com/mGRgS.png
Could someone provide guidance on what might be incorrect here?
Here is the code I am using:
<div class="row">
<div class="col-md-12">
<div class="panel panel2">
<div class="table-responsive">
<table id="dtBasicExample" class="table table-striped table-bordered" cellspacing="0" width: auto !important; >
<thead>
<tr>
<th width="10%">ID
</th>
<th width="10%">File
</th>
<th width="40%">Description
</th>
<th width="20%">Date</th>
<th width="20%">Action</th>
</tr>
</thead>
<tbody>
<?php
$data = mysqli_query($sql_con,"SELECT * FROM noticeboard");
while ($row = mysqli_fetch_array($data)) {
?>
<tr>
<td style="width:10%;"><?php echo $row['id']; ?></td>
<td>
<?php
$file = $row['file'];
$filetype = strtolower(pathinfo($file,PATHINFO_EXTENSION));
if ($filetype =="jpg" || $filetype =="png" || $filetype =="jpeg") {
echo "<a href = '$file' target='_blank'><i class='far fa-file-image file-icons' style='font-size:50px; color: #333'></i></a>";
}
else if($filetype =="docx" || $filetype =="doc"){
echo "<a href = '$file' target='_blank'><i class='far fa-file-word file-icons' style='font-size:50px; color: #333'></i></a>";
}
else{
echo "<a href = '$file' target='_blank'><i class='far fa-file-pdf file-icons' style='font-size:50px; color: #333'></i></a>";
}
?>
</td>
<td><span><?php echo $row['notice_desc']; ?></span></td>
<td><?php echo $row['ndatetime']; ?></td>
<td>
<a href="update_noticeboard.php?value=<?php echo $row['id'] ?>" class="btn btn-outline-primary btn-rounded"><i class="fa fa-edit"></i></a>
<a href="" class="btn btn-outline-danger btn-rounded" data-toggle = "modal" data-target= "#exampleModaldep<?php echo $row['id'];?>"><i class="fa fa-trash"></i></a>
<!-- MODEL -->
<div class="modal fade" id="exampleModaldep<?php echo $row['id'];?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete File</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want to delete this file?
</div>
<div class="modal-footer">
<a href="delete_noticeboard.php?value=<?php echo $row['id'] ?>" class="btn btn-outline-primary btn-rounded">YES</a>
<button type="button" class="btn btn-outline-danger btn-rounded" data-dismiss="modal">NO</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->