Difference between revisions of "Página de pruebas 4"

From Sinfronteras
Jump to: navigation, search
(Replaced content with "{{#css: table { vertical-align: top; } }} <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <t...")
(Tag: Replaced)
 
(173 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{#css:
 
{{#css:
−
  table {
+
    .styled-table {
−
      vertical-align: top;
+
        border-collapse: collapse;
−
  }
+
        margin: 25px 0;
 +
        font-size: 0.9em;
 +
        font-family: sans-serif;
 +
        min-width: 400px;
 +
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 +
    }
 +
    .tablehead {
 +
        font-size: 1.2em;
 +
        background-color: #007bff !important;  <!-- #009879 -->
 +
        color: #ffffff;
 +
        text-align: left;
 +
    }
 +
    .styled-table th,
 +
    .styled-table td {
 +
        padding: 12px 15px;
 +
    }
 +
    .tablebody {
 +
        border-bottom: 1px solid #dddddd;
 +
    }
 +
 
 +
    .tablebody:nth-of-type(even) {
 +
        background-color: #f3f3f3;
 +
    }
 +
 
 +
    .tablebody:last-of-type {
 +
        border-bottom: 2px solid #009879;
 +
    }
 +
    tr.active-row {
 +
        font-weight: bold;
 +
        color: #009879;
 +
    }
 +
 
 +
    tr {
 +
        background-color: transparent !important;
 +
    }
 +
    th {
 +
        background-color: transparent !important;
 +
        cursor: pointer;
 +
    }
 +
    td {
 +
        background-color: transparent !important;
 +
    }
 +
 
 +
    <!--
 +
    tr:nth-child(odd) {
 +
        background: rgba(199, 187, 187, 0.5) !important;
 +
    }
 +
    -->
 +
 
 +
    tr:nth-child(even) {
 +
        background: rgba(153, 143, 143, 0.5) !important;
 +
    }
 +
 
 +
   
 +
    tr:hover:nth-child(odd) {
 +
        background: rgba(56, 139, 253, 0.2) !important;  /* rgba(87, 95, 78, 0.9) */
 +
    }
 +
   
 +
 
 +
    tr:hover:nth-child(even) {
 +
        background: rgba(56, 139, 253, 0.2) !important;  /* rgba(87, 95, 78, 0.9) */
 +
    }
 +
 
 +
    table {
 +
        overflow: hidden !important;
 +
    }
 +
 
 +
 
 +
    td,
 +
    th {
 +
        position: relative !important;
 +
    }
 +
 
 +
    td:hover::after,
 +
    th:hover::after {
 +
        color: red !important;
 +
        content: "" !important;
 +
        position: absolute !important;
 +
        background-color: rgba(56, 139, 253, 0.3) !important;  /* rgb(81, 97, 63) */
 +
        left: 0 !important;
 +
        top: -5000px !important;
 +
        height: 10000px !important;
 +
        width: 100% !important;
 +
        z-index: -1 !important;
 +
    }
 
}}
 
}}
  
  
−
<table style="width:100%">
+
 
−
  <tr>
+
<table class="styled-table">
−
    <th>Firstname</th>
+
    <tr class="tablehead">
−
    <th>Lastname</th>
+
        <th>Name</th>
−
    <th>Age</th>
+
        <th>Points</th>
−
  </tr>
+
        <th>Otro</th>
−
  <tr>
+
        <th>Ahora</th>
−
     <td>Jill</td>
+
        <th>Aver</th>
−
     <td>Smith</td>
+
    </tr>
−
     <td>50</td>
+
    <tr class="tablebody">
−
  </tr>
+
        <td>Dom</td>
−
  <tr>
+
        <td>6000</td>
−
     <td>Eve</td>
+
        <td>4000</td>
−
     <td>Jackson</td>
+
        <td>3000</td>
−
    <td>94</td>
+
        <td>8000</td>
−
  </tr>
+
    </tr>
 +
     <tr class="active-row tablebody">
 +
        <td>Melissa</td>
 +
        <td>5150</td>
 +
        <td>3150</td>
 +
        <td>9150</td>
 +
        <td>4150</td>
 +
     </tr>
 +
    <tr class="active-row tablebody">
 +
        <td>Melissa</td>
 +
        <td>5150</td>
 +
        <td>3150</td>
 +
        <td>9150</td>
 +
        <td>4150</td>
 +
    </tr>
 +
     <tr class="active-row tablebody">
 +
        <td>Melissa</td>
 +
        <td>5150</td>
 +
        <td>3150</td>
 +
        <td>9150</td>
 +
        <td>4150</td>
 +
    </tr>
 +
    <tr class="active-row tablebody">
 +
        <td>Melissa</td>
 +
        <td>5150</td>
 +
        <td>3150</td>
 +
        <td>9150</td>
 +
        <td>4150</td>
 +
     </tr>
 +
    <tr class="active-row tablebody">
 +
        <td>Melissa</td>
 +
        <td>5150</td>
 +
        <td>3150</td>
 +
        <td>9150</td>
 +
        <td>4150</td>
 +
     </tr>
 +
    <tr class="active-row tablebody">
 +
        <td>Melissa</td>
 +
        <td>5150</td>
 +
        <td>3150</td>
 +
        <td>9150</td>
 +
        <td>4150</td>
 +
    </tr>
 
</table>
 
</table>

Latest revision as of 17:12, 24 March 2021



Name Points Otro Ahora Aver
Dom 6000 4000 3000 8000
Melissa 5150 3150 9150 4150
Melissa 5150 3150 9150 4150
Melissa 5150 3150 9150 4150
Melissa 5150 3150 9150 4150
Melissa 5150 3150 9150 4150
Melissa 5150 3150 9150 4150
Retrieved from "http://wiki.sinfronteras.ws/index.php?title=Página_de_pruebas_4&oldid=23225"