Question

我已经对这个话题进行了足够的搜索，最终到了这里。这是我的代码：

echo "<a href='sresult.php?pid=$pi&pname=$p&dep=$d'><table style='background-color: $colour; table-layout: fixed;'>"; ?>
                <tr>
                    <td><?php echo $arr['pid']; ?></td>
                    <td><?php echo $arr['pname']; ?></td>
                    <td><?php echo $arr['year']; ?></td>
                </tr>
        </table></a>

这只是我实际代码的一部分。而css：

table {
            border: 2px solid black;
            border-radius: 10px;
            position: relative;
            top: 5px;
            left: 400px;
            bottom: 0;
            width: 60%;
        }

        td
        {
            text-align: center;
            margin: auto;
            font-size: large;
            color: whitesmoke;
            padding: 0 150px 0 150px;
        }

Webpage showing the problem

现在在上图中您可以看到表格的宽度，即彩色块。但由于它是由锚标记包装的，因此链接从浏览器的最左侧延伸到最右侧。我只希望彩色块是链接而不是整个条纹。任何帮助将不胜感激。

http://jsfiddle.net/53Ssk/embedded/result/

上面是修改后代码的jsfiddle。

Answer 1

不太确定预期的最终结果，

但如果要将链接置于中心位置，则应在display上重置<a>并使用margin:auto;

注意：此结构对HTML5 doctype文档有效，请在您的真实页面中使用它来验证它。

<强> DEMO

您的CSS变为：

a {
    width: 60%;
    margin:auto;
    display:block;
}
table {
    border: 2px solid black;
    border-radius: 10px;
    width: 100%;
    background-color: red; 
    table-layout: fixed;
}
td {
    text-align: center;
    font-size: large;
    color: whitesmoke;      
}

使用的HTML：

<a href="#">
   <table>
     <tr>
       <td>hey</td>
       <td>wassup</td>
       <td>people</td>
     </tr>
   </table>
</a>

Answer 2

你不能这样做你的标记。它无效。因此，要获得结果，您需要更改一些结构

<强> HTML

<table>
    <tbody>
        <tr>
            <td><a href="same-href">Hey</a></td>
            <td><a href="same-href">wassup</a></td>
            <td><a href="same-href">people</a></td>
        </tr>
    </tbody>
</table>

<强> CSS

table a {display:block;}

您可以输入3个链接但设置相同的链接

将链接与表格的宽度对齐

2 个答案: