Html 如何使用CSS将表格从水平布局设置为垂直布局

我正在试着做一张桌子，原来是这样的（对于桌面版）

我正在使用媒体查询来改变它，就像移动版一样，需要使用纯CSS

你是怎么做到的

这是我的名片

更新

第一次尝试感谢安迪

第二次尝试多亏了出埃及记

还有我的html代码

<div class="view-content">
    <table class="views-table cols-6" border="1" cellspacing="0">
        <thead>
            <tr>
                <th class="views-field views-field-scald-thumbnail">
                </th>
                <th class="views-field views-field-title">
                    Title</th>
                <th class="views-field views-field-field-colour">
                    Colour</th>
                <th class="views-field views-field-field-size">
                    Size</th>
                <th class="views-field views-field-quantity">
                    Quantity</th>
                <th class="views-field views-field-commerce-total">
                    Price</th>
            </tr>
        </thead>
        <tbody>
            <tr class="odd views-row-first views-row-last">
                <td class="views-field views-field-scald-thumbnail">
                    <img src="http://placehold.it/84x114" width="84" height="114" alt="">
                </td>
                <td class="views-field views-field-title">
                    Manteau vert M</td>
                <td class="views-field views-field-field-colour">
                    Vert</td>
                <td class="views-field views-field-field-size">
                    34</td>
                <td class="views-field views-field-quantity">
                    1</td>
                <td class="views-field views-field-commerce-total">
                    $120.00</td>
            </tr>
        </tbody>
    </table>
</div>

标题
颜色
大小
量
价格
曼托维特M酒店
垂直
34
1.
$120.00

我创建了一个执行不力的解决方案。我必须隐藏img以获得正确的布局。这可能不是你想要的答案。但是这个JSFIDLE的目标是激励其他人并提供一条可能的道路

CSS:

---

我创建了一个执行不力的解决方案。我必须隐藏img以获得正确的布局。这可能不是你想要的答案。但是这个JSFIDLE的目标是激励其他人并提供一条可能的道路

CSS:

---

受之前工作的启发，我使用绝对定位将图像或多或少放置在您需要的位置

但是，在底部边界上仍有一些工作要做，这在一定程度上取决于图像的尺寸

更好的解决方案需要基于所需布局的更多约束

反应可能有限

注意：我认为诀窍是在包装块周围添加边框，并相应地调整表格/表格单元格边框。如果图像短于桌子的整体高度，则此技巧效果最佳

thead{
浮动：左
}
t车身{
浮球：对
}
thead th{
显示：块；
边框：1px纯黑；
}
tbody td{
显示：块；
边框：1px纯黑；
}
泰德：第一个孩子{
显示：无；
}
td：第一个孩子{
位置：绝对位置；
左：0；
排名：0；
边框：1px纯黑；
边框宽度：1px 0 1px 1px；
右侧填充：5px；
}
td：第一个孩子img{
显示：块；
}
.视图表{
左边距：90像素；
边界：无；
}
.查看内容{
显示：内联块；
位置：相对位置；
}

标题
颜色
大小
量
价格
曼托维特M酒店
垂直
34
1.
$120.00

受之前工作的启发，我使用绝对定位将图像大致放置在需要的位置

但是，在底部边界上仍有一些工作要做，这在一定程度上取决于图像的尺寸

更好的解决方案需要基于所需布局的更多约束

反应可能有限

注意：我认为诀窍是在包装块周围添加边框，并相应地调整表格/表格单元格边框。如果图像短于桌子的整体高度，则此技巧效果最佳

thead{
浮动：左
}
t车身{
浮球：对
}
thead th{
显示：块；
边框：1px纯黑；
}
tbody td{
显示：块；
边框：1px纯黑；
}
泰德：第一个孩子{
显示：无；
}
td：第一个孩子{
位置：绝对位置；
左：0；
排名：0；
边框：1px纯黑；
边框宽度：1px 0 1px 1px；
右侧填充：5px；
}
td：第一个孩子img{
显示：块；
}
.视图表{
左边距：90像素；
边界：无；
}
.查看内容{
显示：内联块；
位置：相对位置；
}

标题
颜色
大小
量
价格
曼托维特M酒店
垂直
34
1.
$120.00

你能接受两张桌子的想法吗？一个用于桌面，一个用于mobile@Andy现在不行，那是最后一个选择。你试过什么吗？有什么事吗？@cimmanon试过这个你能接受两张桌子的想法吗？一个用于桌面，一个用于mobile@Andy现在不行，那是最后一个选择。你试过什么吗？有什么事吗？@cimmanon尝试了这个upvote几乎是为了一个解决方案，但是图像对于感谢upvote是非常重要的，但是我真的想不出一个方法来把它移出这个解决方案table@Andy您的解决方案非常接近，经过一些调整，可以完成这项工作，给出或获取底部边界。请看下面我的尝试，灵感来源于您的post.upvote，这几乎是一个解决方案，但图像非常重要，以表达对upvote的感谢，但我真的想不出一个方法来将其移出table@Andy您的解决方案非常接近，经过一些调整，可以完成这项工作，给出或获取底部边界。请看下面我的尝试，灵感来自你的帖子。正是我所需要的，现在我正在修复PSD设计中的一些问题，谢谢。正是我所需要的，现在我正在修复PSD设计中的一些问题，谢谢

thead
{
    float:left
}
tbody
{
    float:right
}

thead th {
    display: block;   
}
tbody td
{
    display: block;
}

thead th:first-child
{
    display:none;
}

td:first-child
{
    display:none;
}