文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用CSS制作表格？

问如何用CSS制作表格？
EN

Stack Overflow用户

提问于 2015-08-26 16:39:34

回答 1查看 63关注 0票数 1

我尝试使用CSS 显示：表，而不是HTML标记。

我的HTML：

<div class="c_result">

    <div class="rp-row">
        <ul class="rp-first">
            <li>London</li>
        </ul>
        <ul class="rp-second">
            <li>Male</li>
            <li>Female</li>
        </ul>
        <ul class="rp-result">
            <li>result1</li>
            <li>result2</li>
            <li>result3</li>
        </ul>
    </div>

    <div class="rp-row">
        <ul class="rp-first">
            <li>Paris</li>
        </ul>
        <ul class="rp-second">
            <li>Male</li>
            <li>Female</li>
        </ul>
        <ul class="rp-result">
            <li>result4</li>
            <li>result5</li>
            <li>result6</li>
        </ul>
    </div>

</div>

我的CSS：

.c_result {
    border: 1px solid red;
    display: table;
    width: 100%;
}
.c_result .rp-row {
    display: table-row;
    border: 1px solid #000;
}
.c_result ul {
    display: table-row;
}
.c_result .rp-row li {
    display: table-row;
}

结果：

但我想要的结果是：

边框样式也不适用，当我尝试使用边框时，它不会出现在结果中，我怎么做呢？

诚挚的问候。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-26 16:47:47

这看起来好点了吗?？

编辑： colspan &在css中或使用trick时不可能使用行跨度

.c_result {
  border: 1px solid red;
  display: table;
  width: 100%;
}
.rp-row {
  display: table-row;
}
.cell {
  display: table-cell;
}

<div class="c_result">

  <div class="rp-row">
    <ul class="cell rp-first">
      <li>London</li>
    </ul>
    <ul class="cell rp-second">
      <li>Male</li>
      <li>Female</li>
    </ul>
    <ul class="cell rp-result">
      <li>result1</li>
      <li>result2</li>
      <li>result3</li>
    </ul>
  </div>

  <div class="rp-row">
    <ul class="rp-first">
      <li>Paris</li>
    </ul>
    <ul class="cell rp-second">
      <li>Male</li>
      <li>Female</li>
    </ul>
    <ul class="cell rp-result">
      <li>result4</li>
      <li>result5</li>
      <li>result6</li>
    </ul>
  </div>

</div>

编辑：

.c_result {
  width: 600px;
  /* total width */
}
.c_result * {
  display: block;
  /* remove list items and so..*/
  text-align: center;
  /*center text*/
  padding: 0;
  /* reset */
  margin: 0;
  /* reset */
}
li {
  outline: 1px solid black;
  /*border is calculated in element width, outline not.*/
}
.rp-row > * {
  float: right; /*floats bases to right*/
}
.rp-first {
  width: 12.5%;
  /* 1/8 width */
}
.rp-first li {
  line-height: 198px;
  /* base = floor ( 200 / 3 (max split) ) * 3 (max split) = 198 */
}
.rp-second {
  width: 25%;
  /* 2/8 width */
}
.rp-second li {
  line-height: 99px;
  /* base / 2 = 99; */
}
.rp-result {
  width: 62.5%;
  /* 6/8  width */
}
.rp-result li {
  line-height: 66px;
  /* base / 3 = 66; */
}

<div class="c_result">

  <div class="rp-row">
    <ul class="rp-first">
      <li>London</li>
    </ul>
    <ul class="rp-second">
      <li>Male</li>
      <li>Female</li>
    </ul>
    <ul class="rp-result">
      <li>result1</li>
      <li>result2</li>
      <li>result3</li>
    </ul>
  </div>

  <div class="rp-row">
    <ul class="rp-first">
      <li>Paris</li>
    </ul>
    <ul class="rp-second">
      <li>Male</li>
      <li>Female</li>
    </ul>
    <ul class="rp-result">
      <li>result4</li>
      <li>result5</li>
      <li>result6</li>
    </ul>
  </div>

</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32232124

复制

相似问题

问如何用CSS制作表格？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用CSS制作表格？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用CSS制作表格？
EN