JSFiddle - React, Tailwind, and code Playground

by deswolf

HTML

<div id="wrapper">


<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td><input type="text" value=""></td>
    <td>2</td>
    <td>3</td>
  </tr>
    <tr>
    <td><input type="text" value=""></td>
    <td>2</td>
    <td>1<br>3<br>3<br>4line</td>
  </tr>
</table>

</div>

CSS

* {
  box-sizing:border-box;
}

* {
  padding:0;
  margin:0;
}

html,body {
  height:100%;
}

#wrapper {
  width:90%;
  margin:0 auto;
  margin-top:2%;
  height:100%;
}

table {
    table-layout: fixed;
    border-spacing:0;
    width:100%;
    text-align:left;
    border-collapse:separate;
}

td {
  border:1px dotted #333;
  position:relative;
}

td input {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}