Question

好的，我在页面上有几张桌子，其中一张桌子给我带来了麻烦。它是页面上的第二个表。左列是我想要的，另一个似乎是将数据居中放在表行中。我不明白为什么，我不认为它来自WordPress模板的CSS，因为如果我在浏览器中将其作为原始HTML文件启动它也会做同样的事情。以下是包含表格的结果页面的链接（第二张表格）：http://titanpropertymanagement.co/residents/utility-info/

我知道这个问题可能非常简单，但我仍在学习编码，所以我确信它只是缺少一个简单的样式标签。感谢您提供的任何帮助：）

以下是第二个表格的代码，为我提供了问题

<h2 style="text-align: center;">Water &amp; Trash Service</h2>
<table width="100%">
    <tbody>
        <tr>
            <td width="50%">
                <h4>Water/Trash for Lafayette</h4>
                <h5><a href="http://bit.ly/18q8zsG" target="_blank"><span style="text-decoration: underline">Lafayette Utility Dept.</span></a> - (765) 807-1100</h5>
                <ul>
                    <li><span style="text-decoration: underline"><a href="http://www.titanmgmtgroup.com/uploads/2/3/9/1/23918042/lafayette_watersewer_application.pdf">Download Application Here</a>
                        </span>
                    </li>
                </ul>
                <h5>Lafayette Sanitation - (765) 807-1411</h5>
                <ul>
                    <li><a href="http://bit.ly/1as4CRr" target="_blank"><span style="text-decoration: underline">Request Trash/Recycle Bin</span></a>
                    </li>
                </ul>
                <h5>Waste Management - (800) 443-5646</h5>
                <ul>
                    <li><a href="http://bit.ly/17OzcDf" target="_blank"><span style="text-decoration: underline">Request Service Online</span></a>
                    </li>
                </ul>
            </td>
            <td width="50%">
                <h4>Water/Trash For West Lafayette</h4>
                <h5><a href="http://bit.ly/16iR0qF" target="_blank"><span style="text-decoration: underline">American Water</span></a> - (800) 492-8373</h5>
                <ul>
                    <li><a href="http://bit.ly/1as4RMr" target="_blank">Request New Service Online</a>
                    </li>
                </ul>
                <h5>W. Lafayette Sanitation - (765) 775-5242</h5>
                <ul>
                    <li><a href="http://bit.ly/H0lQyl" target="_blank">Request Service Online</a>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

添加

tbody {
  vertical-align: top;
}

到你的样式表。这将覆盖浏览器的tbody默认样式，即将tbody垂直对齐到中间（至少在Chrome中）。

表格数据以表格为中心

1 个答案: