css - Merge cells in HTML -
i'm trying table in html, , have problem. don't know how i'm going explain:
is there possibility convert cell below/adjoined 1 has long vertical text small square format without taking same long vertical text format cell right above it?
here's html document:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>marge cells</title> <link rel="stylesheet" type="text/css" href="dudas.css"> </head> <body> <table border="1px"> <tr> <td> </td> <td class="rotate-90"> corto </td> <td class="rotate-90"> text muuuuy largo </td> </tr> <tr> <td> cuentas </td> <td> 11.2€ </td> <td> 1€ </td> </tr> </table> </body> </html> and here css:
@charset "utf-8"; .rotate-90 { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; position:relative; height: 15px; width: 30 px; } table { border-collapse: collapse; } here's picture of i'm trying achieve
--- new ---
now understand you..
.table-r { border-collapse: collapse; } .table-r td { width: 30px; } ..table-r th { padding: 5px 10px; } .table-r td { text-align: center; padding: 10px 5px; border: 1px solid #ccc; } .table-r th.th-r { height: 140px; white-space: nowrap; } .table-r th.th-r > div { transform: translate(25px, 51px) rotate(315deg); width: 30px; } .table-r th.th-r > div > span { border-bottom: 1px solid #ccc; padding: 5px 10px; } .table-header-rotated th.row-header { padding: 0 10px; border-bottom: 1px solid #ccc; }<table class="table-r"> <thead> <tr> <th class="th-r"> <div><span>header 1</span> </div> </th> <th class="th-r"> <div><span>header 2</span> </div> </th> <th class="th-r"> <div><span>header 3</span> </div> </th> <th class="th-r"> <div><span>header 4</span> </div> </th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td>13</td> <td>14</td> <td>15</td> <td>16</td> </tr> </tbody> </table>--- old --- mean ?
.rotate-90 { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; position: relative; height: 15px; width: 30 px; } table { border-collapse: collapse; }<table> <tr> <th rowspan="4" class="rotate-90">text vertical</th> <th>2</th> <th>3</th> <th>4</th> </tr> <tr> <td>4</td> <td>7</td> <td>8</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td>14</td> <td>15</td> <td>16</td> </tr> </table>you have rowspan , colspan.
colspan this:
+-------------------+ | 1 | +-------------------+ | 3 | 4 | 7 | 8 | +----+----+----+----+ | 9 | 10 | 11 | 12 | +----+----+----+----+ | 13 | 14 | 15 | 16 | +----+----+----+----+ rowspan this:
+----+----+----+----+ | 1 | 2 | 3 | 4 | + +----+----+----+ | | 4 | 7 | 8 | + +----+----+----+ | | 10 | 11 | 12 | + +----+----+----+ | | 14 | 15 | 16 | +----+----+----+----+ rowspan , colspan combined:
+---------+----+----+ | 1 | 3 | 4 | + +----+----+ | | 7 | 8 | +---------+----+----+ | 9 | 10 | 11 | 12 | +----+----+----+----+ | 13 | 14 | 15 | | +----+----+----+----+
Comments
Post a Comment