JSFiddle - React, Tailwind, and code Playground

by mtrantalainen

HTML

<html>
<head>
  <script id="MathJax-script" async
          src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-mml-chtml.min.js">
  </script>
</head>



<table class="no-caption">
<tbody>
<tr>
<th>Luku</th>
<th>Kymmenen potenssi</th>
<th>Etuliite</th>
</tr>
<tr>
<td>\(0{,}000\,000\,001\)</td>
<td>\(10^{-9}\)</td>
<td>nano (n)</td>
</tr>
<tr>
<td>\(0{,}000\,001\)</td>
<td>\(10^{-6}\)</td>
<td>mikro (µ)</td>
</tr>
<tr>
<td>\(0{,}001\)</td>
<td>\(10^{-3}\)</td>
<td>milli (m)</td>
</tr>
<tr>
<td>[[$1$]]</td>
<td>[[$10^0$]]</td>
<td> </td>
</tr>
<tr>
<td>[[$1\,000$]]</td>
<td>[[$10^3$]]</td>
<td>kilo (k)</td>
</tr>
<tr>
<td>[[$1\,000\,000$]]</td>
<td>[[$10^6$]]</td>
<td>mega (M)</td>
</tr>
<tr>
<td>[[$1\,000\,000\,000$]]</td>
<td>[[$10^9$]]</td>
<td>giga (G)</td>
</tr>
</tbody>
</table>
<br />Numeroiden pitäisi näkyä yhdellä rivillä eikä rikkoutua monelle riville.

CSS

html {
  font-family: "Open Sans", "Raleway", sans-serif;
}

table {
	border-collapse: collapse;
	border: none;
	overflow: auto;
	max-width: 100%;
	background: #fff;
}

table th, table td {
	vertical-align: top;
	text-align: left;
	border: solid #ccc 0.1rem;
	background: #f7f7f7;
	padding: 0.2rem 0.5rem;
}

table th {
	color: #000;
	background: #eee;
	background: rgba(0,0,0,0.1);
}