前端 <td> 内字体换行间距太大了
时间: 2023-09-17 11:02:25 浏览: 88
前端 `<td>` 标签内字体换行间距过大的问题可以通过 CSS 样式来解决。具体而言,可以使用 CSS 的 `line-height` 属性来调整行间距。
例如,可以使用如下的 CSS 代码来设置 `<td>` 标签内字体的行间距:
```css
td {
line-height: 1; /* 或者使用其他适合的数值,根据具体需求进行微调 */
}
```
通过将 `line-height` 属性设置为较小的值,可以减小行间距。你可以根据实际需要进行调整,以得到想要的换行行间距。
需要注意的是,如果表格内容过多导致内容溢出 `<td>` 的高度,那么行间距可能会被自动扩大以适应内容。为了避免这种情况,可以考虑设置 `<td>` 的 `max-height` 属性,并将 `overflow` 属性设置为 `hidden`,以确保内容不会溢出。
总结起来,通过调整 `<td>` 的 CSS 样式,特别是使用 `line-height` 属性,可以解决前端 `<td>` 标签内字体换行间距过大的问题。
相关问题
<td>2023058</td> <td>10 17 22 26 30 33 + 11</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td >0</td> </tr> <tr class="new"> <td>2023059</td> <td></td> <td>24</td> <td>10</td> <td>26</td> <td>31</td> <td>12</td> <td>33</td> <td>24</td> <td>08</td> <td>31</td> <td>24</td> <td></td> </tr> <tr> <td colspan="2">正确次数</td> <td>4</td> <td>3</td> <td>7</td> <td>2</td> <td>9</td> <td>3</td> <td>4</td> <td>5</td> <td>3</td> <td>6</td> <td></td> </tr> <tr> <td colspan="2">错误次数</td> <td>16</td> <td>17</td> <td>13</td> <td>18</td> <td>11</td> <td>17</td> <td>16</td> <td>15</td> <td>17</td> <td>14</td> <td></td> </tr> <tr> <td colspan="2">当前连对</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td></td> </tr> <tr> <td colspan="2">当前连错</td> <td>1</td> <td>4</td> <td>2</td> <td>4</td> <td>1</td> <td>7</td> <td>1</td> <td>2</td> <td>13</td> <td>3</td> <td></td> </tr> <tr> <td colspan="2">最大连对</td> <td>2</td> <td>1</td> <td>3</td> <td>1</td> <td>2</td> <td>1</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td></td> </tr> <tr> <td colspan="2">最大连错</td> <td>9</td> <td>7</td> <td>4</td> <td>12</td> <td>3</td> <td>7</td> <td>7</td> <td>4</td> <td>13</td> <td>3</td> <td></td> </tr> </table> </div> </div> </div> <script type="text/javascript" src="https://img.78500.cn/mobile/iscroll.js"></script> <script type="text/javascript"> var wrapper; function loaded() { wrapper = new iScroll("wrapper", { vScrollbar: false, hScrollbar: false, zoom: true, zoomMin: 0.5, zoomMax: 1 }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); </script></body> </html> 对应上代码用正则表达式提取 以 <tr class="new"> 开头 </tr>结束 里面的数字
可以使用以下正则表达式进行提取:
```python
import re
text = """<table class="table table-bordered table-condensed"> <thead> <tr> <th>期号</th> <th colspan="11">开奖号码</th> <th>总和</th> </tr> </thead> <tbody> <tr class="new"> <td>2023058</td> <td>10 17 22 26 30 33 + 11</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>0</td> </tr> <tr class="new"> <td>2023059</td> <td></td> <td>24</td> <td>10</td> <td>26</td> <td>31</td> <td>12</td> <td>33</td> <td>24</td> <td>08</td> <td>31</td> <td>24</td> <td></td> </tr> <tr> <td colspan="2">正确次数</td> <td>4</td> <td>3</td> <td>7</td> <td>2</td> <td>9</td> <td>3</td> <td>4</td> <td>5</td> <td>3</td> <td>6</td> <td></td> </tr> <tr> <td colspan="2">错误次数</td> <td>16</td> <td>17</td> <td>13</td> <td>18</td> <td>11</td> <td>17</td> <td>16</td> <td>15</td> <td>17</td> <td>14</td> <td></td> </tr> <tr> <td colspan="2">当前连对</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td></td> </tr> <tr> <td colspan="2">当前连错</td> <td>1</td> <td>4</td> <td>2</td> <td>4</td> <td>1</td> <td>7</td> <td>1</td> <td>2</td> <td>13</td> <td>3</td> <td></td> </tr> <tr> <td colspan="2">最大连对</td> <td>2</td> <td>1</td> <td>3</td> <td>1</td> <td>2</td> <td>1</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td></td> </tr> <tr> <td colspan="2">最大连错</td> <td>9</td> <td>7</td> <td>4</td> <td>12</td> <td>3</td> <td>7</td> <td>7</td> <td>4</td> <td>13</td> <td>3</td> <td></td> </tr> </table> </div> </div> </div> <script type="text/javascript" src="https://img.78500.cn/mobile/iscroll.js"></script> <script type="text/javascript"> var wrapper; function loaded() { wrapper = new iScroll("wrapper", { vScrollbar: false, hScrollbar: false, zoom: true, zoomMin: 0.5, zoomMax: 1 }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); </script></body> </html>"""
pattern = re.compile(r'<tr class="new">(.*?)</tr>', re.S)
matches = pattern.findall(text)
for match in matches:
print(match)
```
这将输出以下内容:
```
<td>2023058</td> <td>10 17 22 26 30 33 + 11</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>×</td> <td>0</td>
<td>2023059</td> <td></td> <td>24</td> <td>10</td> <td>26</td> <td>31</td> <td>12</td> <td>33</td> <td>24</td> <td>08</td> <td>31</td> <td>24</td> <td></td>
```
用以下表格,人工构建一个html文件,文件的body标签里只有一个table标签:<table border="1"> <tr><td>歌名</td><td>作者</td><td>时间</td></tr> <tr><td>白月光与朱砂痣</td><td>大籽</td><td>2021</td></tr> <tr><td>晴天</td><td>周杰伦</td><td>2003</td></tr> <tr><td>Love Story</td><td>Taylor Swift</td><td>2009</td></tr> <tr><td>梦幻丽莎发廊</td><td>五条人</td><td>2016</td></tr> </table>
<!DOCTYPE html>
<html>
<head>
<title>歌曲列表</title>
</head>
<body>
<table border="1">
<tr>
<td>歌名</td>
<td>作者</td>
<td>时间</td>
</tr>
<tr>
<td>白月光与朱砂痣</td>
<td>大籽</td>
<td>2021</td>
</tr>
<tr>
<td>晴天</td>
<td>周杰伦</td>
<td>2003</td>
</tr>
<tr>
<td>Love Story</td>
<td>Taylor Swift</td>
<td>2009</td>
</tr>
<tr>
<td>梦幻丽莎发廊</td>
<td>五条人</td>
<td>2016</td>
</tr>
</table>
</body>
</html>