1.edit{
2 width: 100%;
3 height: 25px;
4}
5.editMode{
6 border: 1px solid black;
7}
8
9/* Table Layout */
10table {
11 border:3px solid lavender;
12 border-radius:3px;
13}
14
15table tr:nth-child(1){
16 background-color:dodgerblue;
17}
18table tr:nth-child(1) th{
19 color:white;
20 padding:10px 0px;
21 letter-spacing: 1px;
22}
23
24/* Table rows and columns */
25table td{
26 padding:10px;
27}
28table tr:nth-child(even){
29 background-color:lavender;
30 color:black;
31}
1<div class='container'>
2
3 <table width='100%' border='0'>
4 <tr>
5 <th width='10%'>S.no</th>
6 <th width='40%'>Username</th>
7 <th width='40%'>Name</th>
8 </tr>
9 <?php
10 $query = "select * from users order by name";
11 $result = mysqli_query($con,$query);
12 $count = 1;
13 while($row = mysqli_fetch_array($result) ){
14 $id = $row['id'];
15 $username = $row['username'];
16 $name = $row['name'];
17 ?>
18 <tr>
19 <td><?php echo $count; ?></td>
20 <td>
21 <div contentEditable='true' class='edit' id='username_<?php echo $id; ?>'>
22 <?php echo $username; ?>
23 </div>
24 </td>
25 <td>
26 <div contentEditable='true' class='edit' id='name_<?php echo $id; ?>'>
27 <?php echo $name; ?>
28 </div>
29 </td>
30 </tr>
31 <?php
32 $count ++;
33 }
34 ?>
35 </table>
36</div>