创建一个＆＃34;水平＆＃34; HTML中的表格（带引导程序）

Question

我需要实现这个设计：

正如你所看到的，我没有带有标题的列，而是有行，第一个＆＃34;值＆＃34;实际上是标题。

我需要HTML布局对所有分辨率都有响应和整洁。此外，我会非常感激，如果有人建议我如何保持右边的图片，或多或少与＆＃34;表格＃34;（当然，在小分辨率下，我会让图片采取整个Bootstrap行）

是否有＆＃34;泛型＆＃34;实现这个的方法？通用我的意思是不需要细致的CSS和不必要的媒体查询。

我正在使用Bootstrap 3。

Answer 1

看起来这就是你要找的东西：

<div class='row'>
  <div class="col-md-6"> 
    This will be the left side
    <div class="row"> First Row</div>
    <div class="row"> Third Row</div>
    <div class="row"> Fourth Row</div>
  </div>
  <div class="col-md-6"> 
    This will be the right side
  </div>
</div>

Answer 2

您可以使用bootstrap tables完成此操作。左列将保持表格，右列将保留图像。

请参阅代码段：https://bootsnipp.com/snippets/Vgnb3

<div class="col-lg-6 col-sm-6">
<table class="table">
<thead>
    <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>John</td>
        <td>Carter</td>
        <td>johncarter@mail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
    </tr>
</tbody>
</table>
</div>

<div class="col-lg-6 col-sm-6">
    <img class="img-responsive" src="http://via.placeholder.com/650x150"
</div>