A Pen by 擬音の妖精さん of neko

Thumbnail
This awesome code was written by neko_sugar310gb, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright neko_sugar310gb ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  擬音の妖精さん of neko</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <table>
  <tr>
    <td>あいうえおかきくけこさしすせそ</td>
    <td><div>1111</div></td>
  </tr>
  <tr>
    <td>あいうえおかきくけこさしすせそ</td>
    <td><div>2222</div></td>
  </tr>
   <tr>
    <td>あいうえおかきくけこさしすせそ</td>
    <td><div>2222</div></td>
  </tr>
    <tr>
    <td>あいうえおかきくけこ</td>
    <td><div>2222</div></td>
  </tr>
    <tr>
    <td>あいうえお</td>
    <td><div>2222</div></td>
  </tr>
</table>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/neko_sugar310gb/a-pen-by-andx64ecandx97f3andx306eandx5996andx7cbeandx3055andx3093-of-neko-yjGRbv */
*{box-sizing:border-box;}
table{
  width:450px;
  margin:100px;
  border-collapse:collapse;
  background:#ddd;
}
td{
  display:inline-block;
  border:solid 1px #000;
  vertical-align:baseline;
  padding:0.3em;  
}
tr:nth-child(n+2) td{
  border-top:0;
}
tr:nth-child(2) td:nth-child(2),
tr:nth-child(3) td:nth-child(2){
  border-top:dashed 1px #f00;
}
td:first-child{
  width:40%;
}
td:nth-child(2){
  width:60%;
  border-left:0;
}
div{
  width:100%;
}

Comments