Table design

如图所示,请帮助实现表格中使用html的单元格内的背景色加载器.我试着用下面的方法来设计,但没有奏效

<table>
  <tr>
    <td><div style="width:20%;background-color:blue;">12345</div></td>
  </tr>
<table>

但在为单元格内的div指定宽度后,文本也会根据div宽度移动. 我需要把值放在单元格的中心,背景 colored颜色 宽度应该根据我的计算增加或减少.

推荐答案

您可以这样做:

table{
  border:1px lightgray solid;

}
td{
  width:100px;
  height:20px;
  position:relative;
}
div{
  height:100%;
  background:lightblue;
}
p{
  position: absolute;
  left: 50%;
  top: -25%;
  transform: translate(-50%,-50%);
} 
<table>
  <tr>
    <td>
      <div style='width:45.5%;'>
      </div>
      <p>45.5</p>
    </td>
  </tr>
<table>

Html相关问答推荐

关于角内按钮范围的混乱

无法使xpath为HTML代码块工作

为什么XPath返回的元素比我预期的要多?

获得一个css框,以便在页面太小时不再粘在页面的角落.

页脚与主要内容重叠

背景可点击,而不是文本

防止position:relative的child在出界时收缩

Html视频标签:圆角像素化

CSS中的转换属性是如何工作的?

Chatbox底部显示新消息,并向上推送旧消息

try 更新我的Node.js应用程序中的用户,但我收到错误.然而,当我使用postman 时,更新工作正常

按钮悬停效果不影响按钮内的图标

如何将一个边框向下移动

从 Vue 应用程序的容器元素渲染 HTML

您如何动态更改 Vue 中更高级别的标签的 CSS

调整窗口大小时文本重叠导航栏

Mediawiki css/html 信息框创建空白行

如何使我的下拉菜单响应?

不理解 CSS 中的 General sibling combinator (~)

嵌套固定定位的 Div 滚动条渗透到前景中的 Div