正确的CSS格式

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

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

我的问题是：

有没有人有CSS代码，将应用TR高度70像素，宽度100％。 TD要高出70px。然后TD（或TR）的整个区域成为锚点，并且可以在TR高度的中间浮动文本。

问候开局

更新：

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

来源

2012-09-18 TheGambit

你能分享任何代码/你尝试过什么？ – Sphvn

@TheGambit试试发表你对[jsFiddle]（http://jsfiddle.net/）的看法。这将使我们很容易看到您的问题并发挥解决问题的能力。 –

@ TheGambit，每个单元格应该有多少文本？它只会占用一行或多行吗？ – user907860

-1

使用的onclick = “” 的TR和TD元素里面的属性整行或只是整个单元格可点击。

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

来源

2012-09-18 13:52:33 Maringo

永远不要使用onclick =“”属性。 –

这应该做到这一点。

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仅供参考。祝你好运！

来源

2012-09-18 14:10:53

它不符合条件。表格不能展宽至100％宽度。也可能有更多的文字，然后简单的1,2,3。例如：http://jsfiddle.net/wcafu/3/ – user907860

-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-18 14:27:49

正确的CSS格式

回答

相关问题