3 column with constraints

by Stephane de Luca

HTML

<section>
	<div style="height:calc(100% - 20px)">
		<!-- three-first impact, cause, cure-column rows -->
		<table style="background-color:rgb(252,252,252);">
			<thead>
				<tr>
					<th>Consequences</th>
					<th>Causes</th>
					<th>Cures</th>
				</tr>
			</thead>
			<tbody>
				<tr>
                    <!-- consequences column -->
					<td style="border-right: solid 6px white; width:33%">
						<div class="vScrollable" style="height: calc(100% - 100px)">
							<ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                            </ul>
                        </div>
                    </td>
					<!-- causes column -->
					<td style="border-right: solid 6px white; width:33%">
						<div class="vScrollable" style="height: calc(100% - 100px)">
							<ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                            </ul>
                        </div>
                    </td>

					<!-- cures column -->
					<td rowspan="2">
						<div class="vScrollable">
							<ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
      ...

CSS

* {
    font-family: "AvenirNextCondensed-Regular";
}
section {
    border: solid 1px red;
    height: 300px;
}
table {
    width: 100%;
}
table>tbody>td {
    vertical-align: top;
}

.vScrollable {
	-webkit-box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	height: 100%;
}