如何让DIV元素呈现广播/电视台节目表样式？附JSFiddle示例代码

我来帮你搞定这个节目表样式的问题！你用display: table系列属性来构建布局的思路完全没问题——节目表本身就是规整的行列结构，表格布局天生适配这种需求。我帮你调整现有代码，实现标准的节目表样式：

1. 修正基础布局样式 #

你的现有代码里border设置不完整（缺少border-style），导致边框不显示，而且单元格没有内边距和分隔，看起来很拥挤。先调整核心CSS：

/* 根容器作为表格整体 */
.epg-root {
  position: relative;
  display: table;
  border-collapse: collapse; /* 合并边框，避免重复出现双线条 */
  border: 4px solid black; /* 完整的边框设置：宽度+样式+颜色 */
  width: 100%; /* 让节目表占满容器宽度 */
}

/* 每行节目 */
div.info {
  display: table-row;
}

/* 每个节目单元格 */
div.info1 {
  display: table-cell;
  background-color: ivory;
  border: 1px solid #999; /* 单元格之间的分隔线 */
  padding: 10px 8px; /* 内边距，让内容不拥挤 */
  vertical-align: middle; /* 让单元格内容垂直居中 */
}

2. 显示节目内容 #

你原来把图片和p标签都设为display:none，节目表需要展示时间、节目名、封面或主持人信息，所以调整这部分：

/* 节目缩略图 */
div.info1 img {
  height: 40px;
  display: inline-block; /* 显示图片，和文字同行排列 */
  margin-right: 8px; /* 和文字保持间距，更美观 */
}

/* 节目文字信息 */
div.info1 p {
  display: inline-block;
  margin: 0; /* 去掉p标签默认的上下边距 */
  vertical-align: middle;
}

3. 完整示例HTML结构 #

配合上面的CSS，你的HTML可以调整成这样（补充表头和多组节目，让结构更清晰）：

<TITLE>Hallam FM - Best Variety of Hits</TITLE>
<div class="epg-root">
  <!-- 表头行：显示栏目分类 -->
  <div class="info">
    <div class="info1"><strong>时间段</strong></div>
    <div class="info1"><strong>节目名称</strong></div>
    <div class="info1"><strong>主持人/简介</strong></div>
  </div>
  <!-- 第一档节目 -->
  <div class="info">
    <div class="info1">06:00-10:00</div>
    <div class="info1">
      <img src="morning-show-cover.jpg" alt="早安节目封面">
      <p>早安Hallam</p>
    </div>
    <div class="info1">由Mike主持，带你开启活力满满的早晨</div>
  </div>
  <!-- 第二档节目 -->
  <div class="info">
    <div class="info1">10:00-14:00</div>
    <div class="info1">
      <img src="afternoon-hits-cover.jpg" alt="金曲节目封面">
      <p>金曲下午茶</p>
    </div>
    <div class="info1">经典老歌不间断，陪伴你的午后时光</div>
  </div>
</div>

额外优化建议 #

• 如果需要高亮当前正在播出的节目，可以给对应的.info行加一个类，比如.current-show，设置background-color: #f5f5f5或者加粗边框，让它更显眼。
• 响应式适配：在小屏幕上，可以通过媒体查询把表格布局改成块级布局，避免内容挤在一起：

@media (max-width: 768px) {
  .epg-root {
    display: block;
  }
  div.info {
    display: block;
    border-bottom: 2px solid black;
    padding: 10px 0;
  }
  div.info1 {
    display: block;
    border: none;
    padding: 4px 0;
  }
}

这样调整后，你的DIV就能呈现出清晰规整的广播/电视台节目表样式啦！

内容的提问来源于stack exchange，提问作者avenas8808