Question

我有一个PHP表循环所有行。我希望文本浮动在表行的中间，但是将行的整个宽度+高度作为锚点。

我所拥有的是每一行9 TD。所以我给每个TD都应用了一个锚点。我试图做td p并将高度设置为50％或垂直对齐中间，但这不起作用。我想我需要重新开始使用CSS。

我的问题是：

是否有人拥有将TR高度应用于70px，宽度为100％的CSS代码。 TD高达70px。然后TD（或TR）的整个区域成为可点击的锚点，文本浮动在TR高度的中间。

此致开局

更新

这是我的CSS和PHP http://jsfiddle.net/j8ptc/显然它不能正确显示，因为它的PHP

Answer 1

这应该这样做。

 table {
   width: 100%
   border-collapse: collapse;
}
table td {
   border: 1px solid black;
}
table td a{
   height: 70px;
   display: inline-block;
   width: 200px;
   padding: 3px;
   text-decoration: none;
}

table td a {
    text-align: center;
    line-height: 70px;
}

这是结果的fiddle。

编辑：

删除

line-height: 70px;

并添加

word-wrap: break-word;

将考虑长行文本，但它会使垂直对齐变得困难。

如果细胞的内容是动态的（或其他未知的），这似乎会造成问题。 Here's another question about it以供参考。祝好运！

Answer 2

使用TR或TD元素中的onclick =“”属性可以使整行或整个单元格可单击。

使用this site来帮助垂直对齐。

Answer 3

最好的解决方案可能是完全省略你的锚点，而是向行添加一个click事件（或者更好的是，向表中添加一个，并检测目标）。使用CSS，您可以更改光标以指示链接。

PHP：

echo '<table id="yourTable">';

while ($row = mysql_fetch_array($result))
{
    echo '<tr class="record" data-id="'.$row['id'].'">';
    echo '<td>'.$row['company'].'</td>';
    echo '<td>'.$row['project'].'</td>';
    echo '<td>'.$row['assignee'].'</td>';
    echo '<td>'.$row['current_milestone'].'</td>';
    echo '<td>'.$date=date("d-m-Y", strtotime($row['start_date'])).'</td>';

    // etc.

    echo '</tr>'
}

echo '</table>';

JavaScript的：

var table = document.getElementById('yourTable');

table.onclick = function(e)
{
    e = e || window.event;

    var target = e.target || e.srcElement,
        id;

    if (target.tagName === 'TD')
    {
        target = target.parentNode;
    }

    if (target.tagName === 'TR' && target.className === 'record')
    {
        window.open('update.php?id=' + id, 'updateWindow');
    }
}

CSS：

tr
{
    cursor: pointer;
}

td
{
    height: 70px;
}

正确的CSS格式

3 个答案: