HTML表格怎么在表格每一行前加小圆点（代码分享）-html教程-PHP中文网

推荐用::before伪元素实现表格行前小圆点，需设tr为position:relative并配合绝对定位；禁用list-style因tr非列表项，强行改display会破坏表格结构。

html表格怎么在表格每一行前加小圆点（代码分享）

表格行前加小圆点，本质是控制 `<tr> 的左侧装饰<p>直接给 <code><tr> 加 <code>list-style` 是无效的——`<tr> 不是列表项，不支持该属性。真正可行的方式是：把每行变成带装饰的块级容器，或者用伪元素在 <code><tr> 左侧“画”一个点。<h3>推荐方案：用 <code>::before` 伪元素 + `position: absolute`

这是最干净、不影响表格结构、兼容性好（IE11+）的做法。关键是把 <tr> 设为 <code>position: relative，再用伪元素定位到左侧。

table {
  border-collapse: collapse;
  width: 100%;
}
tr {
  position: relative;
  padding-left: 16px; /* 给点留出空间 */
}
tr::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 14px;
}

必须设 position: relative 在 <tr> 上，否则 <code>::before 会相对整个表格定位
padding-left 要大于点的水平占用，否则文字可能被遮挡
用 transform: translateY(-50%) 垂直居中比 top: 8px 更可靠（避免行高变化时错位）
如果需要不同颜色或大小，只改 color 和 font-size 即可

替代方案：用 <td> 第一列插入 <code>• 或 <span></span>

适合内容可控、且不介意 DOM 变多的场景。缺点是语义上多了一列，导出 Excel 或屏幕阅读器可能误读。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<tr>
<td style="width: 20px;">•</td>
  <td>第一列数据</td>
  <td>第二列数据</td>
</tr>

用 •（•）比写 <span>•</span> 更轻量，无需额外样式
务必给该列设固定 width，防止点被挤变形
若表格有表头 <th>，记得对应行也加一列，否则错行<li>响应式布局下，这一列可能破坏自适应，慎用于移动端优先项目</li> <h3>千万别用 <code>list-style-type: disc 直接套 <tr><p>这是新手常踩的坑：写了 <code>tr { list-style-type: disc; }，但完全没反应。因为 <tr> 默认是 <code>display: table-row，而 list-style 只对 display: list-item 生效。强行改成 display: list-item 会彻底破坏表格渲染逻辑——单元格错位、边框消失、合并失效全都会发生。
- 浏览器会静默忽略 list-style，不会报错，但你找不到原因
- 调试时检查 computed style，看 display 是否还是 table-row
- 真要用列表语义，应该重构为 <ul></ul> + <li>，而不是硬改表格
伪元素方案看着代码多几行，但它是唯一既保持表格语义、又不污染 HTML 结构、还能灵活控制位置和样式的办法。实际项目里，点的颜色、间距、是否 hover 变色，都靠它微调——别省这几行 CSS。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！