table ttd v 1.2

components/Sanksi/BeritaAcara_A.js

@@ -434,7 +434,7 @@ class BeritaAcara extends Component {
 
                             </CopyToClipboard>
                         </p>
-                        <table className='demo'>
+                        {/* <table className='demo'>
                             <tbody>
 
                                 <tr>
@@ -459,7 +459,7 @@ class BeritaAcara extends Component {
                                             </td>
                                         </tr>)) : ""}
                             </tbody>
-                        </table>
+                        </table> */}
                         {/* <div>
                             <div id="ttd-header" className='text-center signature-border'>
                                 <span className='text-center'> PESERTA RAPAT PENYUSUNAN REKOMENDASI</span>
@@ -477,10 +477,37 @@ class BeritaAcara extends Component {
                                     )) : ""}
                             </div>
                         </div> */}
+                        <div  >
+                            <div className='header-ttd signature-border pt-1 pb-1'>
+                                <text className='header-ttd font-weight-bold '>PESERTA RAPAT PENYUSUNAN REKOMENDASI</text>
+                            </div>
+                            <div id="ttd">
+
+                                {dataLaporan
+                                    ? dataLaporan.data?.peserta_penetapan_sanksi?.map((value) => (
+                                        <div className='ttd-div'>
+                                            <div className='sign-ttd'>
+                                                <img
+                                                    className='sign-ttd'
+                                                    src={value.ttd.path} />
+                                            </div>
+                                            <div className='sign-nama'>
+                                                <text>
+                                                    {value.nama}
+                                                </text>
+                                            </div>
+                                        </div>
+                                    )) : ""}
+
+                            </div>
+
+
+
+                        </div>
 
 
                     </page>
-                </div>
+                </div >
             </div >
 
         );

styles/app/app/mycss.scss

@@ -1,5 +1,5 @@
 
-
+///////// Home
 #video-css video{
     width: 450px;
 
@@ -54,3 +54,136 @@
     font-size: 15px;
    }
 }
+
+///////////////////////////////////////////<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>
+
+////////////////////<<<<<<<< TABLE BERITA ACARA >>>>>>>>>>>>>>>> 
+.demo {
+    border: 1px solid #C0C0C0;
+    border-collapse: collapse;
+    padding: 5px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .demo .thdemo {
+    border: 1px solid #C0C0C0;
+    padding: 5px;
+    background: #F0F0F0;
+    text-align: center;
+  }
+  .demo .trdemo{
+    border: 1px solid #C0C0C0;
+    padding: 5px;
+  }
+  
+  .demo .tddemo  {
+    border: 1px solid #C0C0C0;
+    padding: 5px;
+    height: 100px;
+    min-width: 200px;
+  }
+  
+  .table-a {
+    border: 1px solid #C0C0C0;
+    border-collapse: collapse;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 5px;
+    margin-left: -128px auto;
+    margin-right: auto;
+    table-layout: fixed;
+  }
+  
+  .table-a th {
+    border: 1px solid #C0C0C0;
+    padding: 5px;
+    background: #F0F0F0;
+    text-align: center;
+  }
+  
+  .table-a td {
+    border: 1px solid #C0C0C0;
+    padding: 5px;
+    word-wrap: break-word;
+    max-width: 150px;
+  }
+
+    /////////////////////<<<<<<<<<<<<<<<<<<<<<<<<<<<< coba 1 TABLE WRAP TTD >>>>>>>>>>>>>>>>>>>
+// #ttd {
+//     max-width: 410px;
+//     display: flex;
+//     flex-wrap: wrap;
+//     margin-left: auto;
+//     margin-right: auto;
+//       text-align: center;
+ 
+  
+//   }
+//   #ttd-header {
+//     width: 410px;
+//     margin-left: auto;
+//     margin-right: auto;
+//     text-align: center;
+//     background-color: #C0C0C0;
+//     color: black;
+//   }
+
+//     .ttd-div{
+//         width: 205px;
+//       }
+//       .sign-nama{
+//         background-color: rgb(206, 206, 206);
+//         text-align: center;
+//         border: 1px solid#d9d6d6;
+//         padding: 2px;
+//         word-wrap: break-word;
+//         width: 205px;
+
+        
+        
+//       }
+//       .sign-ttd{
+//         width: 205px;
+//         height: 80px;
+//         border: 1px solid#d9d6d6;
+//         padding: 5px;
+      
+//       }
+////////////////////////////////////////coba 2 table ttd
+#ttd{
+    width: 612px;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-wrap: wrap;
+   
+
+    .ttd-div{
+        width: 306px;
+        border: 1px solid #C0C0C0;
+    }
+    .sign-ttd{
+        width: 306px;
+        height: 153px;
+        margin-right: auto;
+        margin-left: auto;
+    }
+    .sign-nama{
+                background-color: rgb(206, 206, 206);
+                text-align: center;
+                padding: 2px;
+                word-wrap: break-word;
+                color: black;
+              }
+  }
+  .header-ttd{
+    background-color: #C0C0C0; 
+    text-align: center;
+    color: black;
+    width: 612px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+

styles/bootstrap/_print.scss

@@ -136,7 +136,6 @@
       border-color: $table-border-color;
     }
 
-    // Bootstrap specific changes end
   }
 }
 
@@ -170,56 +169,7 @@
   padding-right: 50px;
 }
 
-.demo {
-  border: 1px solid #C0C0C0;
-  border-collapse: collapse;
-  padding: 5px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.demo .thdemo {
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-  background: #F0F0F0;
-  text-align: center;
-}
-.demo .trdemo{
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-}
-
-.demo .tddemo  {
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-  height: 100px;
-  min-width: 200px;
-}
-
-.table-a {
-  border: 1px solid #C0C0C0;
-  border-collapse: collapse;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding: 5px;
-  margin-left: -128px auto;
-  margin-right: auto;
-  table-layout: fixed;
-}
-
-.table-a th {
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-  background: #F0F0F0;
-  text-align: center;
-}
-
-.table-a td {
-  border: 1px solid #C0C0C0;
-  padding: 5px;
-  word-wrap: break-word;
-  max-width: 150px;
-}
+/////////////////////
 
 #footer {
   position: fixed;
@@ -284,45 +234,9 @@ body {
 .signature-style{
   border: 1px solid#c9c8c8;
 width: 380px;
-height: 200px;
+height: 190px;
 margin-left: auto;
 margin-right: auto;
 border-radius: 4px;
 }
   
-
-
-  /////////////////////Coba pake flex wrap
-// #ttd {
-//   width: 410px;
-//   display: flex;
-//   flex-wrap: wrap;
-//   margin-left: auto;
-//   margin-right: auto;
-//     text-align: center;
-// }
-// #ttd-header {
-//   width: 410px;
-//   margin-left: auto;
-//   margin-right: auto;
-//   text-align: center;
-// }
-// .ttd-div{
-//   width: 205px;
-//   // height: 100px;
-// }
-// .sign-nama{
-//   background-color: rgb(206, 206, 206);
-//   text-align: center;
-//   // width: 215px;
-//   border: 1px solid#d9d6d6;
-//   padding: 2px;
-  
-// }
-// .sign-ttd{
-//   width: 205px;
-//   height: 80px;
-//   border: 1px solid#d9d6d6;
-//   padding: 5px;
-
-// }