Inline table

<thead> appears like a column, and <td> like rows

by Avi Algaly

HTML

<div class="search-table-outer wrapper">
<table class="search-table inner">
  <thead>
    <tr>
      <th>werwerAsdsd</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    
  </tbody>
</table>
</div>

CSS

table{
  display:block;
  white-space:nowrap;
  width:100%;
}
td, th {
  border-bottom: 1px solid red;
  border-collapse: collapse;
}
thead {
  float: left;
  background: yellow;
  width: 20%;
}
thead tr {
  width:100%;
  float:left;
}
thead th {
  display: block;
}
tbody {
  float: left;
  width: 80%;
}
tbody tr {
  display: inline-block;
}
tbody td {
  float:left;
  width:100%;
}