tablestyles.html 5.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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. </div>
  76. <h2>Original editor source</h2>
  77. <div id="cloned-source"></div>