1

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

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

我的问题是：

有没有人有 CSS 代码将 TR 高度应用到 70 像素，宽度 100%。TD 为 70px 高。然后将 TD（或 TR）的整个区域作为可点击的锚点，文本浮动在 TR 高度的中间。

问候开局

更新：

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

4

3 回答 3

0

这个应该可以的。 

 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;
}​

这是一个结果。

编辑：

移除

line-height: 70px;

并添加

word-wrap: break-word;

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

如果单元格的内容是动态的（或其他未知的），这似乎会造成问题。 这是另一个关于它的问题以供参考。祝你好运！

于 2012-09-18T14:10:53.820 回答
-1

使用 TR 或 TD 元素内的 onclick="" 属性使整行或整个单元格可单击。

使用此站点来帮助进行垂直对齐。

于 2012-09-18T13:52:33.243 回答
-1

最好的解决方案可能是完全忽略您的锚点，而是将点击事件添加到行（或者，更好的是，添加到表中并检测目标）。使用 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;
}
于 2012-09-18T14:27:49.637 回答