8
0

tablestyles.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <div id="editor">
  2. <figure>
  3. <table style="border: 1px solid green;background:#fdfd77;">
  4. <thead>
  5. <tr>
  6. <td><p>Column A</p></td>
  7. <td style="border:2px dashed black;background-color: lightblue"><p>Column B</p></td>
  8. <td style="background: palevioletred"><p>Column C</p></td>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. <tr>
  13. <td style="border-color: deeppink deepskyblue;border-style: solid;border-width: 1px;border-bottom-width: 2px;border-right-style: dotted;">
  14. <p>A1</p>
  15. </td>
  16. <td style="border: 1px solid blue;"><p>B1</p></td>
  17. <td style="border: 1px solid red;"><p>C1</p></td>
  18. </tr>
  19. <tr>
  20. <td style="border-right:1px solid blue;"><p>A2</p></td>
  21. <td style="background:transparent;"><p>B2</p></td>
  22. <td><p>C3</p></td>
  23. </tr>
  24. </tbody>
  25. </table>
  26. </figure>
  27. <h3>Table from GDocs</h3>
  28. <table style="border:none;border-collapse:collapse;width:468pt;table-layout:fixed">
  29. <colgroup>
  30. <col>
  31. <col>
  32. <col>
  33. </colgroup>
  34. <tbody>
  35. <tr style="height:21pt">
  36. <td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  37. <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
  38. style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">A</span>
  39. </p></td>
  40. <td style="border-left:solid #000000 1pt;border-right:dotted #ff0000 1.5pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  41. <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
  42. style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">B</span>
  43. </p></td>
  44. <td style="border-left:dotted #ff0000 1.5pt;border-right:dotted #ff0000 1.5pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  45. <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
  46. style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">C</span>
  47. </p></td>
  48. </tr>
  49. <tr style="height:21pt">
  50. <td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  51. <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
  52. style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a1</span>
  53. </p></td>
  54. <td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dashed #4c1130 3pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  55. <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
  56. style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">b1</span>
  57. </p></td>
  58. <td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  59. <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
  60. style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">c1</span>
  61. </p></td>
  62. </tr>
  63. <tr style="height:21pt">
  64. <td style="border-left:solid #000000 1pt;border-right:dashed #4c1130 3pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  65. <br></td>
  66. <td style="border-left:dashed #4c1130 3pt;border-right:dashed #4c1130 3pt;border-bottom:dashed #4c1130 3pt;border-top:dashed #4c1130 3pt;vertical-align:middle;background-color:#a2c4c9;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  67. <p dir="ltr" style="line-height:1.2;text-align: center;margin-top:0pt;margin-bottom:0pt;"><span
  68. style="font-size: 11pt; font-family: Arial; color: rgb(204, 0, 0); background-color: transparent; font-weight: 700; font-style: italic; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">AWESOME</span>
  69. </p></td>
  70. <td style="border-left:dashed #4c1130 3pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  71. <br></td>
  72. </tr>
  73. </tbody>
  74. </table>
  75. <h3>Table from GDocs (all styles set + column widths)</h3>
  76. <table style="border:none;border-collapse:collapse;">
  77. <colgroup>
  78. <col width="27">
  79. <col width="192">
  80. <col width="17">
  81. </colgroup>
  82. <tbody>
  83. <tr style="height:0pt">
  84. <td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  85. <br></td>
  86. <td style="border-left:solid #000000 1pt;border-bottom:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  87. <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
  88. style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a</span>
  89. </p></td>
  90. <td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  91. <br></td>
  92. </tr>
  93. <tr style="height:144pt">
  94. <td style="border-right:dotted #7f6000 2.25pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  95. <br></td>
  96. <td style="border-left:dotted #7f6000 2.25pt;border-right:dotted #7f6000 2.25pt;border-bottom:dotted #7f6000 2.25pt;border-top:dotted #7f6000 2.25pt;vertical-align:middle;background-color:#ffd966;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  97. <br><br></td>
  98. <td style="border-left:dotted #7f6000 2.25pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  99. <br></td>
  100. </tr>
  101. <tr style="height:0pt">
  102. <td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  103. <br></td>
  104. <td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  105. <br></td>
  106. <td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
  107. <br></td>
  108. </tr>
  109. </tbody>
  110. </table>
  111. </div>
  112. <h2>Original editor source</h2>
  113. <div id="cloned-source"></div>