JSFiddle - React, Tailwind, and code Playground

by Khris Roberts

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-sm-10" style="min-height:280px">

            <div class="panel panel-default">
            <div class="panel-body"> 
                  <div class="row"> 
       <table class="table table-striped table-bordered">
          <thead>
            <tr> 
              <th>Name</th>
              <th>Message</th>
              <th>Time</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Mark</td>
              <td>mesList.message might be longer than expected</td>
              <td>mesList.timestamp</td>
            </tr>
                        <tr>
              <td>Mark</td>
              <td>mesList.message might be longer than expected</td>
              <td>mesList.timestamp</td>
            </tr>
                        <tr>
              <td>Mark</td>
              <td>mesList.message might be longer than expected</td>
              <td>mesList.timestamp</td>
            </tr>
                        <tr>
              <td>Mark</td>
              <td>mesList.message might be longer than expected</td>
              <td>mesList.timestamp</td>
            </tr>
                        <tr>
              <td>Mark</td>
              <td>mesList.message might be longer than expected</td>
              <td>mesList.timestamp</td>
            </tr>
          </tbody>
        </table>
                 </div>                     



</div></div></div>

CSS

.panel{
  background-color:red;
} 
 table {
                    max-width: 50%;
                    background-color: transparent;
                    border-collapse: collapse;
                    border-spacing: 0;

                    }
                    .table thead th {
                    vertical-align: bottom;
                    }
                    .table th {
                    font-weight: bold;
                    }
                    .table th, .table td {
                    padding: 8px;
                    line-height: 20px;
                    text-align: left;
                    vertical-align: top;

                    }
                    .table td {
                      border-top: 1px solid #dddddd; 
                    }
                    table {
                    border-collapse: collapse;
                    border-spacing: 0;
                    }
                    .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
                    background-color: #f9f9f9;
                    }
                    .table-bordered {
                    border: 1px solid #dddddd;
                    border-collapse: separate;
                    border-left: 0;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                    border-radius: 4px;
                    }
                    .table-bordered th, .table-bordered td {
                    border-left: 1px solid #dddddd;
                    }