Html Colspan in Css

HTML colspan in CSS

There's no simple, elegant CSS analog for colspan.

Searches on this very issue will return a variety of solutions that include a bevy of alternatives, including absolute positioning, sizing, along with a similar variety of browser- and circumstance-specific caveats. Read, and make the best informed decision you can based on what you find.

colspan in CSS?

Use media query for small screen and display:block for every row.

How to imitate table's colspan using div with CSS?

I suggest to look at Flexbox. It's much easier to create columns.

 // CSS //
.flexcontainer {
   display: flex;
   flex-direction: row;
}

// HTML //
<body>
   <div class="flexcontainer">
      <div>column1</div>

      <div>column2</div>
   </div>
</body>

Table css width is broken by colspan attribute

You can use colgroup (original answer here)

html * {
  font-size: 98%;
  color: #000;
  font-family: Arial !important;
}

table {
  table-layout: fixed;
  width: 100%;
}

th,
td {
  padding: 15px;
  word-break: break-all;
  border: 1px solid black;
}

.short {
  width: 5%;
}

.long {
  width: 95%;
}

<table style="width: 100%">
  <colgroup>
    <col class="short" />
    <col class="long" />
  </colgroup>
  <tr>
    <td colspan="2">
      <div style="font-size: 300%;">Table of Contents</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>1</div>
    </td>
    <td>
      <div>2</div>
    </td>
  </tr>
</table>

Colspan not working as expected (without CSS)

People old enough (or creating HTML emails up to these days) still remember the good old width HTML attribute :)

<!DOCTYPE html><html lang="en" dir="ltr">
<head>  <meta charset="utf-8">  <title>Table HTML</title>  <style>    table,    tr,    th,    td {      border: 1px solid black;    }        tr,    th,    td {      padding: 10px;    }  </style></head>
<body>  <table>    <tr>      <th rowspan="2" colspan="2">A</th>      <th>B</th>      <th>C</th>    </tr>
    <tr>      <td>D</td>      <td>E</td>    </tr>
    <tr>      <td colspan="2" width="100">F</td>      <td colspan="2" width="100">G</td>    </tr>
  </table></body>
</html>

How can display table-row behave like colspan=3

Using display: table; it cannot be done (cause sadly there's no colspan: 3; or rowspan property in CSS, therefore stylesheet is unable to mimick a real <table> element)

but hey, flex to the rescue!

.row{  display: flex;  flex-flow: wrap;}.cell{  width: 25%;  background:#eee;}.colspan2{  flex: 2;}

<div class="row">  <div class="cell">Cell1</div>  <div class="cell">Cell2</div>  <div class="cell">Cell3</div>  <div class="cell">Cell4</div>  <div class="cell">Cell5</div>  <div class="cell colspan2">Cell6 Colspan2</div>  <div class="cell">Cell7</div></div>

Html Colspan in Css