HTML / CSS:表:宽度不起作用

时间:2014-04-26 19:34:27

标签: html css

(正常)理解HTML和CSS时遇到了麻烦:

我有一张桌子:

<table style="height:200px;width:120px; border-style:solid;">
    <tr>
        <td><img src=IMAGELINK" style="height:120px;width:120px;"/></td>
    </tr>
    <tr>
        <td><b> NAME </b> </td>
    </tr>
    <tr>
        <td> <b> PRICE:- </b> </td>
    </tr>
    <tr>
            <td>
            <a style=
                "
                width:50%;
                padding:1px;
                border-style:solid;
                border-width:1px;
                border-color: #eee0000;
                background-color:#eee000;
                text-decoration:none;
                color:black;"
                href="LINK"> buy 
            </a>
            <a style=
                   "
                width:50%;
                padding:1px;
                border-style:solid;
                border-width:1px;
                border-color: #eee0000;
                background-color:#eee000;
                text-decoration:none;
                color:black;"
                href="LINK"> read 
            </a>

        </td>
    </tr>
</table>

以下是它的外观: enter image description here

正如您所看到的,两个购买/阅读按钮非常小,出于某种原因,它们只占用了行的一半空间。我已经尝试了很多不同的东西来让两个按钮占据整排......

3 个答案:

答案 0 :(得分:4)

也许您可以对表格单元格使用colspan属性 http://jsfiddle.net/zKW3z/1/

答案 1 :(得分:1)

我个人认为将格式应用于<a href="">代码不是一个好主意。

我调整了您的代码,以便按钮填充空间,方法是将它们放入<div>并设置float:leftfloat:right。 也不要使用50%的宽度,因为有一些填充和边距处于活动状态。

http://jsfiddle.net/tK9Vg/

<table style="height:200px;width:120px; border-style:solid;">
<tr>
    <td><img src=IMAGELINK" style="height:120px;width:120px;"/></td>
</tr>
<tr>
    <td><b> NAME </b> </td>
</tr>
<tr>
    <td> <b> PRICE:- </b> </td>
</tr>
<tr>
        <td>
        <a href="LINK"><div style=
            "
            width:46%;
            float:left;
            padding:1px;
            border-style:solid;
            border-width:1px;
            border-color: #eee0000;
            background-color:#eee000;
            text-decoration:none;
            color:black;
            "
            > buy </div>
        </a>
        <a href="LINK"><div style=
               "
            width:46%;
            float:right;
            padding:1px;
            border-style:solid;
            border-width:1px;
            border-color: #eee0000;
            background-color:#eee000;
            text-decoration:none;
            color:black;
            "
            > read </div>
        </a>
    </td>
</tr>
</table>

答案 2 :(得分:1)

编写内联CSS从来都不是一个好主意。这被认为是不好的做法。了解html仅用于表示信息。它应该看起来/出现的确切内容是由CSS处理的。由于它们执行不同的功能,因此必须保持独立。这被称为&#39;关注点分离&#39;。

因此我建议您编辑代码,以便将它们分开。

因此,您可以将HTML设为:

<table style="height:200px;width:120px; border-style:solid;">
    <tr>
        <td>
            <img src="#/>
        </td>
    </tr>
    <tr>
        <td><span>NAME</span>
        </td>
    </tr>
    <tr>
        <td><span>PRICE:-</span>
        </td>
    </tr>
    <tr>
        <td> <div><a href="#"> Buy</a></div> 
 <div> <a href="#"> Read </a></div> 

        </td>
    </tr>
</table>

你的CSS就是这样:

td > img {
    height:120px;
    width:120px;
}
td > span {
    font-weight:bold;
}

td > div {
    width: 48%;
    display:inline-block;
}

div > a {
    width:100%;
    margin:0 1px;
    border-style:solid;
    border-width:1px;
    border-color: #eee0000;
    background-color:#eee000;
    text-decoration:none;
    color:black;
    display:inline-block;
    text-align:center;
}

这将为您提供所需的信息。

在此处查看:http://jsfiddle.net/9HxW5/

希望这有帮助!!!