1.

Can we remove borders from a table in Bootstrap?

Answer»

The table without a border is known as borderless border. Bootstrap provides a separate class to create a borderless table. This class removes borders from a table.

The EXAMPLE displays both bordered as well as borderless table:

<!DOCTYPE HTML> <html lang="en"> <head>   <title>Bootstrap Borderless Table</title>   <meta CHARSET="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h2>Borderless table</h2>   <p>The following is the Investor's data:</p>               <table class="table table-borderless">     <thead>       <tr>         <TH>COMPANY</th>         <th>Investor</th>       </tr>     </thead>     <tbody>       <tr>         <td>ABC</td>         <td>PQ</td>       </tr>       <tr>         <td>GHI</td>         <td>VW</td>       </tr>       <tr>         <td>JKL</td>         <td>EF</td>       </tr>     </tbody>   </table>    <h2>Bordered table</h2>   <p>The following is the Investor's data:</p>               <table class="table">     <thead>       <tr>         <th>Company</th>         <th>Investor</th>       </tr>     </thead>     <tbody>       <tr>         <td>ABC</td>         <td>PQ</td>       </tr>       <tr>         <td>GHI</td>         <td>VW</td>       </tr>       <tr>         <td>JKL</td>         <td>EF</td>       </tr>     </tbody>   </table> </div> </body> </html>

The output displays both bordered as well as borderless table: 



Discussion

No Comment Found