html - 删除表格中两行小按钮之间的空格
问题描述
当我使用大小超过 ~25px 的按钮并且行之间没有空格时,我发现的所有解决方案都会有所帮助。但是,当我尝试使用尺寸较小(如 18 像素)的按钮时,行之间会出现空格。到目前为止,只有 margin: -px 帮助我减少了一些空间。
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; display: block;">
<tr style="padding: 0;">
<td style="padding: 0;">
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
</td>
</tr>
<tr style="padding: 0;">
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
</tr>
<tr style="padding: 0;">
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
</tr>
<tr style="padding: 0;">
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
</tr>
</table>
解决方案
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<style>td {line-height: 18px;}</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; display: block;">
<tr style="padding: 0;">
<td style="padding: 0;">
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
</td>
</tr>
<tr style="padding: 0;">
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
</tr>
<tr style="padding: 0;">
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
</tr>
<tr style="padding: 0;">
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
<td style="padding: 0;">
<button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
</td>
</tr>
</table>
</body>
</html>
推荐阅读
- java - 如何在 Android Studio 中使用 Stockfish 国际象棋引擎?
- jquery - 这是代码的重复,并希望最小化 jquery
- wordpress - 如何显示自定义分类中的所有自定义帖子?
- python - 生成大量 (x,y,z) 坐标的最有效方法
- php - 如何为用户和管理员使用一种表单,但对用户隐藏一个输入控件?
- neo4j - 如何避免在 Neo4j 中创建导致循环的关系
- python - PyQt5 DLL 加载失败
- installation - Why do I get this error message when running 'yum install edb-as11-server'
- python - 如何使用 def 中的变量
- javascript - 如何用空格替换两个分隔符之间的文本?