Css 表中的分区图像

我需要在Photoshop中剪切一个图像并重新组合它。我想创建一个table/div表，在其中放置分区图像的片段

我已经这样做了：

<div id="Table">
    <div id="row">
        <div id="col">
            <img src="01.png" alt="">
        </div>
        <div id="col">
            <img src="02.png" alt="">
        </div>
        <div id="col">
            <img src="03.png" alt="">
        </div>
    </div>
    <div id="row">
        <div id="col">
            <img src="04.png" alt="">
        </div>
        <div id="col">
            <img src="05.png" alt="">
        </div>
        <div id="col">
            <img src="06.png" alt="">
        </div>
    </div>
    <div id="row">
        <div id="col">
            <img src="07.png" alt="">
        </div>
        <div id="col">
            <img src="08.png" alt="">
        </div>
        <div id="col">
            <img src="09.png" alt="">
        </div>
    </div>
</div>

使用Css：

<style type="text/css">
<!--
img {
    width: 100%;
    height: auto;
}

#Table {
    display: table;
    width: 50%;
}
#row {
    display: table-row;
}

#col {
    display:table-cell;
}

-->
</style>

更新： 我必须在中间（IMG 5）添加一个表，包括项目、数量和价格。我已经更新了小提琴。小提琴中有一些问题，但这里有我页面截图的链接

JSFIDDLE:

---

添加

display:block

并从img标签中删除

width

，以消除单元格间距：

img {
    display: block;
    height: auto;
}

---

更新的fiddle:

我正在做一个类似的项目（响应图像地图），我发现放置在单个图像上的定位div更稳定

它还具有用作图像映射的额外优势，因为您可以将内容放入9个div中或向9个div添加功能，使用更多或更少的div，并且没有对齐问题，因为它使用一个图像与多个切片图像。一个很棒的例子是CSS Play上的响应图像地图：

下面是一个类似于您的示例的代码

---

HTML

记得添加！DOCTYPE html或IE将出现问题。此外，div宽度设置为33%，带有边框以突出显示结构。在实时版本中，您将删除边框，并尝试将水平div设置为33.333%，等于100%。或33%34%33%

---

对于原始CSS表格布局，您可以添加以下附加CSS以稳定表格并移除图像下的默认底部间隙，它在Firefox和Explorer中工作，但在其他浏览器中以不同的屏幕大小显示了奇怪的间隙或对齐问题

.table {
display:table;
width:50%;
margin:0;
padding:0;  
border-width:0;
border-style:none;
border-collapse:collapse;                           
}

.col {
display:table-cell;
border:none;
}

.image {
width:100%;
height:auto;
border:0px;
vertical-align:bottom;
}

---

使用灵活的图像背景更新了重新设计 根据您最新的Fiddle，看起来您希望显示一个以打印机图像为背景的数据表。下面的JSFIDLE示例在请求的50%处设置了一个灵活的容器div。容器中有数据表和绝对定位的打印机图像，可缩放并用作背景

---

HTML

项目价格
布拉布拉150
伊夫杰克逊94
项目价格
布拉布拉150
伊夫杰克逊94

如果为您的问题创建解决方案，您可能会得到更多/更快的帮助。感谢@dav1dsm1th的建议！该图像不调整与“显示：块”收据像篮子一样工作，我需要在中间添加每个项目。我尝试更新小提琴。你的小提琴很有帮助，现在我们可以看到你想做什么。我在底部添加了一个新的提琴，桌子位于可缩放打印机图像背景的前面。这应该适合您的情况。注意-我更新了上面和JSFIDLE示例中的css，以便您可以限制最小大小。样式被注释掉了，但是如果你需要的话，就在那里。

html{
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}

body {
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}

#wrapper {
height:100%;
width:100%;
}

.image-holder {
width:50%;
position:relative;
}

.image-background {
width:100%;
display:block;
}

.hotspot-container {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}

#L01 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:0%;
border:solid 1px #000000;
}
#L02 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:0%;
border:solid 1px #000000;
}
#L03 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:0%;
border:solid 1px #000000;
}
#L04 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:33%;
border:solid 1px #000000;
}
#L05 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:33%;
border:solid 1px #000000;
}
#L06 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:33%;
border:solid 1px #000000;
}
#L07 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:66%;
border:solid 1px #000000;
}
#L08 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:66%;
border:solid 1px #000000;
}
#L09 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:66%;
border:solid 1px #000000;
}

.table {
display:table;
width:50%;
margin:0;
padding:0;  
border-width:0;
border-style:none;
border-collapse:collapse;                           
}

.col {
display:table-cell;
border:none;
}

.image {
width:100%;
height:auto;
border:0px;
vertical-align:bottom;
}

.price-container {
    position:relative;    
    padding:0;
    display:table;
    width:50%;
}

.image-bg {
    display:block;
    position:absolute;
    top:0;
    left:0;
    min-height:100%;
/*  min-width:300px; - setting is helpful if the distortion at smaller sizes is bothesome, set here and on table-holder - width of the actual image */
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    z-index:-1;
}

.table-holder {
    z-index:2;
    padding:2em;
/*  min-width:300px;   */
}

.printer-display-table {
    width:100%;
    padding:0;
    border-width:0;
    border-style:none;
    border-collapse:collapse;
    font-family:verdana;
    font-size:.6em;
}

.printer-display-table td {
    border:solid 1px #000000;
    padding:.5em;
}

<div class="price-container">    

<img src="http://i.imgur.com/wurCt2y.jpg" class="image-bg" />
 
<div class="table-holder">   
<table class="printer-display-table">
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>
</div>
    
</div>