1

すべての行をループアウトする PHP テーブルがあります。テーブルの行の中央にテキストを浮かせたいのですが、行の幅と高さ全体をアンカーとして持ちたいです。

私が持っているのは、各列に 9 TD です。そこで、すべての TD にアンカーを適用しました。td p を実行して、高さを 50% に設定するか、中央に垂直に揃えようとしましたが、うまくいきません。CSSで最初からやり直す必要があると思います。

私の質問は：

TRの高さを70px、幅100%に適用するCSSコードを持っている人はいますか? 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

最善の解決策は、アンカーを完全に除外し、代わりにクリックイベントを行に追加することです（または、さらに良いことに、テーブルに追加して、ターゲットを検出します）。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 に答える
-1

TR または TD 要素内で onclick="" 属性を使用して、行全体またはセル全体をクリック可能にします。

このサイトを使用して、垂直方向の配置を支援します。

于 2012-09-18T13:52:33.243 に答える