创建一个“横向"HTML 中的表格(带引导程序) [英] Creating a "horizontal" table in HTML(with bootstrap)

问题描述

我需要实现这样的设计:

如您所见，我有行，而不是带有标题的列，其中第一个值"实际上是标题.

我需要 HTML 布局对所有分辨率都具有响应性和整洁性.另外，如果有人建议我如何将图片保持在右侧，或多或少与表格"对齐(当然，在小分辨率下，我会让图片拍摄整个 Bootstrap 行)，我将不胜感激.

是否有任何通用"方法可以实现这一目标?泛型是指不需要细致的 CSS 和不必要的媒体查询的东西.

我正在使用 Bootstrap 3.

解决方案

您可以使用 引导表.左栏将保存表格，右栏将保存图像.

查看代码片段:https://bootsnipp.com/snippets/Vgnb3

<table class="table"><头><tr><th>Row</th><th>名字</th><th>Last Name</th><th>电子邮件</th></tr></thead><tr><td>1</td><td>约翰</td><td>卡特</td><td>[e-mail]</td></tr><tr><td>2</td><td>彼得</td><td>帕克</td><td>[e-mail]</td></tr><tr><td>3</td><td>约翰</td><td>兰博</td><td>[e-mail]</td></tr></tbody>
<div class="col-lg-6 col-sm-6"><img class="img-responsive" src="http://via.placeholder.com/650x150"

I need to achieve this design:

As you can see, instead of having columns with headers, i have rows, where the first "value" is actually the header.

I need the HTML layout to be responsive and tidy for all resolutions. Also, i would appreciate it much, if someone advises me how to keep picture on the right, more or less aligned with the "table"(of course, in small resolutions i would make the picture take an entire Bootstrap row)

Is there any "generic" way to achieve this? By generic i mean something that doesn't require meticulous CSS and unnecessary media queries.

I'm working with Bootstrap 3.

解决方案

You can accomplish this with bootstrap tables. The left column will hold the table and the right column will hold the image.

See the snippet: 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>[e-mail]</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[e-mail]</td>
    </tr>
    <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[e-mail]</td>
    </tr>
</tbody>
</table>
</div>

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

这篇关于创建一个“横向"HTML 中的表格(带引导程序)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！