HTML + CSS表格行内联块边框无文字
[英]HTML+CSS Table row inline-block border no text
问题描述
I have a little problem: 
我有一个小问题：
I have one table per row with different columns, and I need to have the first and the second column with the same width percentage so I have used inline-block inside td elements. 我每行有一个表格，各列各不相同，第一列和第二列的宽度百分比相同，因此我在td元素内部使用了内联块。 My problem is that when I don't put text inside td the border of the cell renders differently than a td with text. 我的问题是，当我不将文本放入td内时，单元格的边框呈现与带有文本的td不同。
What can I do? 我能做什么？
I have found that putting: 我发现把： inside, the td works fine, but I don't like this solution. 在内部，TD工作正常，但我不喜欢这种解决方案。
table { color: black; font-family: Verdana; background-color: yellow; } td { border: 1px solid black; text-align: left; padding: 1px; }
<div style="width:100%"> <tr> <table style="width:100%;"> <tr> <td style="width:20%;display:inline-block;">a1</td> <td style="width:33%;display:inline-block;"></td> <td style="width:33%;display:inline-block;">a3</td> <td style="width:10%;display:inline-block;">a4</td> </tr> </table> </tr> <tr> <table style="width:100%"> <tr> <td style="width:20%;display:inline-block;">b1</td> <td style="width:33%;display:inline-block;"> </td> <td style="width:40%;display:inline-block;">b3</td> </tr> </table> </tr> </div>
1 个解决方案
解决方案1
0 2018-02-03 13:18:05
for td tag in css use min-height attribute 对于CSS中的td标签，请使用min-height属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> table { color: black; font-family: Verdana; background-color: yellow; } td { border: 1px solid black; min-height: 20px; text-align: left; padding: 1px; } </style> </head> <body> <div style="width:100%"> <table style="width:100%;"> <tr> <td style="width:20%;display:inline-block;">a1</td> <td style="width:33%;display:inline-block;"></td> <td style="width:33%;display:inline-block;">a3</td> <td style="width:10%;display:inline-block;">a4</td> </tr> </table> <table style="width:100%"> <tr> <td style="width:20%;display:inline-block;">b1</td> <td style="width:33%;display:inline-block;"> </td> <td style="width:40%;display:inline-block;">b3</td> </tr> </table> </tr> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.