「已注销」 2023-02-24 15:55 采纳率: 14.3%
浏览 23
已结题

vue的table垂直对齐样式

如图所示发现;两个td始终无法垂直对齐 felx 都试了

img


结构如下

  <table id="formCellPhone" class="tableColumn">
                        <tr>
                            <th>排行</th>
                            <th>手机号</th>
                        </tr>
                        <tr>
                            <td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
                            <td><p>18888888888</p></td>
                        </tr>
                        <tr>
                            <td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
                            <td><p>18888888888</p></td>
                        </tr>
                        <tr>
                            <td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
                            <td><p>18888888888</p></td>
                        </tr>
                        <tr>
                            <td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
                            <td><p>18888888888</p></td>
                        </tr>
                        <tr>
                            <td><img alt="活跃榜" src="~@/assets/img/images/a_6/1.png" /></td>
                            <td><p>18888888888</p></td>
                        </tr>
                    </table>

.table {
  width: 100%;
  border: 1px solid #ccc;
}

.table td {
  padding: 10px;
}

table.tableColumn {
  text-align: center;
  font-size: 12px;
  color: #fff;
  width: 324px;
  border-width: 1px;
  border-color: transparent;
  border-collapse: collapse;
}

table.tableColumn th {
  color: #cbe5f3;
  text-align: center;
  font-size: 12px;
  background-color: transparent;
  border-width: 1px;
  padding-top: 10px;
  padding-left: 10px;
  border-style: solid;
  border-color: transparent;
}

table.tableColumn tr {
  background-color: transparent;
}

table.tableColumn td {
  border-width: 1px;
  //padding: 8px;
  border-style: solid;
  border-color: transparent;
}

#formCellPhone td img {
  vertical-align: bottom;
  width: 18px;
}

#formCellPhone td p {
  text-align: center;
  padding-top: 10px;
  color: #cbe5f3;
}

  • 写回答

4条回答 默认 最新

  • 柚ξ 2023-02-24 16:10
    关注

    给文字设一下行高试试 line-height

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月4日
  • 创建了问题 2月24日

悬赏问题

  • ¥15 Stable Diffusion,用Ebsynth utility在视频选帧图重绘,第一步报错,蒙版和帧图没法生成,怎么处理啊
  • ¥15 请把下列每一行代码完整地读懂并注释出来
  • ¥15 pycharm运行main文件,显示没有conda环境
  • ¥15 易优eyoucms关于二级栏目调用的问题
  • ¥15 寻找公式识别开发,自动识别整页文档、图像公式的软件
  • ¥15 为什么eclipse不能再下载了?
  • ¥15 编辑cmake lists 明明写了project项目名,但是还是报错怎么回事
  • ¥15 关于#计算机视觉#的问题:求一份高质量桥梁多病害数据集
  • ¥15 特定网页无法访问,已排除网页问题
  • ¥50 如何将脑的图像投影到颅骨上