• html写一个table表


    HTML代码:

    1. <div class="table_box w-full">
    2. <div class="title_top">XX表div>
    3. <div class="title_btm">(
    4. <input class="input input_1" type="text">
    5. xxxx)
    6. div>
    7. <table class="table w-full">
    8. <thead>
    9. <tr>
    10. <td style="width: 50%;" colspan="5">
    11. 时间:
    12. <input class="input input_2" type="text" maxlength="4">
    13. <input class="input input_3" type="text" maxlength="2">
    14. <input class="input input_4" type="text" maxlength="2">
    15. 日 星期
    16. <input class="input input_5" type="text" maxlength="1">
    17. td>
    18. <td style="width: 50%;" colspan="5">
    19. <div class="w-full flex items-center">
    20. <div class="w-1/2 flex items-center">
    21. 地点:
    22. <input class="input input_6" type="text">
    23. div>
    24. <div class="w-1/2 flex items-center">
    25. 方式:
    26. <input class="input input_6" type="text">
    27. div>
    28. div>
    29. td>
    30. tr>
    31. <tr style="position: relative">
    32. <td style="width: 100%;" colspan="10">
    33. <br /><br />
    34. 评审人:<input class="input input_7" type="text">
    35. <br /><br /><br />
    36. 参加人员:<input class="input input_8" type="text">
    37. <br /><br /><br />
    38. td>
    39. <div
    40. style="position: absolute;bottom: 0;right: 0;display: flex;align-items: center;cursor: pointer;padding: 2px;font-size: 12px;">
    41. + 新增建议div>
    42. tr>
    43. <tr>
    44. <td colspan="1" class="text-center">
    45. 序号
    46. td>
    47. <td colspan="4" class="text-center">
    48. 建议
    49. td>
    50. <td colspan="5" class="text-center">
    51. 修改意见
    52. td>
    53. tr>
    54. <tr>
    55. <td colspan="1" class="text-center">
    56. 1
    57. td>
    58. <td colspan="4" class="text-center">
    59. <input class="input input_9" type="text">
    60. td>
    61. <td colspan="5" class="text-center">
    62. <input class="input input_9" type="text">
    63. td>
    64. tr>
    65. <tr>
    66. <td colspan="1" class="text-center">
    67. 2
    68. td>
    69. <td colspan="4" class="text-center">
    70. <input class="input input_9" type="text">
    71. td>
    72. <td colspan="5" class="text-center">
    73. <input class="input input_9" type="text">
    74. td>
    75. tr>
    76. <tr>
    77. <td colspan="1" class="text-center">
    78. 3
    79. td>
    80. <td colspan="4" class="text-center">
    81. <input class="input input_9" type="text">
    82. td>
    83. <td colspan="5" class="text-center">
    84. <input class="input input_9" type="text">
    85. td>
    86. tr>
    87. <tr>
    88. <td style="width: 100%;" colspan="10">
    89. <div class="flex flex-col flex-grow w-full">
    90. <div>意见: div>
    91. <textarea class="input input_10" rows="6" cols="50">textarea>
    92. div>
    93. <div class="flex items-center justify-end mt-4">
    94. 签字/日期:
    95. <input class="input input_11" type="text">
    96. div>
    97. td>
    98. tr>
    99. thead>
    100. table>
    101. <div style="width: 95%;display: flex;margin:8px auto;line-height: 22px;">
    102. <div>注:div>
    103. <div style="display: flex;flex-flow: column">
    104. <div>1.xxxxxxxxxxxxxxx。div>
    105. <div>2.xxxxxxxxxxxxxxx。div>
    106. div>
    107. div>
    108. div>

     CSS代码:

    1. .table_box {
    2. width: 100%;
    3. font-family: '宋体' !important;
    4. color: #000 !important;
    5. .input {
    6. outline: none;
    7. border: 0;
    8. border-bottom: 1px solid #000;
    9. color: #000;
    10. }
    11. .input_1 {
    12. font-size: 20px;
    13. text-align: center;
    14. width: 250px;
    15. }
    16. .input_2 {
    17. font-size: 14px;
    18. text-align: center;
    19. width: 40px;
    20. }
    21. .input_3 {
    22. font-size: 14px;
    23. text-align: center;
    24. width: 30px;
    25. }
    26. .input_4 {
    27. font-size: 14px;
    28. text-align: center;
    29. width: 30px;
    30. }
    31. .input_5 {
    32. font-size: 14px;
    33. text-align: center;
    34. width: 30px;
    35. }
    36. .input_6 {
    37. font-size: 14px;
    38. text-align: center;
    39. width: 100px;
    40. border: 0;
    41. }
    42. .input_7 {
    43. font-size: 14px;
    44. text-align: left;
    45. width: 612px;
    46. border: 0;
    47. }
    48. .input_8 {
    49. font-size: 14px;
    50. text-align: left;
    51. width: 500px;
    52. border: 0;
    53. }
    54. .input_9 {
    55. font-size: 14px;
    56. text-align: center;
    57. width: 100%;
    58. height: 100%;
    59. border: 0;
    60. }
    61. .input_10 {
    62. width: 100%;
    63. font-size: 14px;
    64. // text-align: center;
    65. width: 100%;
    66. border: 0px solid #000;
    67. margin-top: 10px;
    68. resize: none;
    69. }
    70. .input_11 {
    71. font-size: 14px;
    72. text-align: left;
    73. width: 250px;
    74. border: 0px solid #000;
    75. }
    76. .title_top,
    77. .title_btm {
    78. display: flex;
    79. align-items: center;
    80. justify-content: center;
    81. font-weight: 700;
    82. }
    83. .title_top {
    84. font-size: 25px;
    85. }
    86. .title_btm {
    87. font-size: 20px;
    88. margin: 15px 0;
    89. }
    90. .table {
    91. width: 100%;
    92. border-collapse: collapse;
    93. .text-center {
    94. text-align: center !important;
    95. }
    96. th,
    97. td {
    98. border: 1px solid black;
    99. padding: 8px;
    100. text-align: left;
    101. }
    102. }
    103. }

  • 相关阅读:
    力扣-python-两数相加
    【Gradle】一、全新项目构建工具Gradle的安装配置
    C#开发的OpenRA游戏之游戏设计思路
    SpringBoot自动配置的原理篇,剖析自动配置原理;实现自定义启动类!附有代码及截图详细讲解
    Springboot+Vue项目-基于Java+MySQL的IT技术交流和分享平台系统(附源码+演示视频+LW)
    光标签使能的车路协同现状与展望
    Redis双写一致性、持久化机制、分布式锁
    【carsim+simulink 联合仿真——车辆轨迹MPC跟踪】
    《Effective Java》知识点(3)--类和接口
    面试官这一套 Framework 连环炮;看看你能撑到第几步?
  • 原文地址:https://blog.csdn.net/qq_43770056/article/details/139470352