Tabletest

Revision as of 18:31, 27 October 2024 by Benos (talk | contribs) (Created page with "→‎Tooltip table styling: .tooltip-table { border-collapse: collapse; width: auto; →‎Adjust width to fit content if needed: } .tooltip-table td { position: relative; text-align: center; →‎Center content horizontally: vertical-align: middle; →‎Center content vertically: padding: 0; →‎Remove padding around cells: border: 1px solid black; →‎Optional: keeps table borders visible: } →‎Tooltip styling: .tooltip-cell .tooltip-text { visibil...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/* Tooltip table styling */ .tooltip-table {

 border-collapse: collapse;
 width: auto; /* Adjust width to fit content if needed */

}

.tooltip-table td {

 position: relative;
 text-align: center; /* Center content horizontally */
 vertical-align: middle; /* Center content vertically */
 padding: 0; /* Remove padding around cells */
 border: 1px solid black; /* Optional: keeps table borders visible */

}

/* Tooltip styling */ .tooltip-cell .tooltip-text {

 visibility: hidden;
 width: 350px; /* Increase width for more space */
 background-color: #333;
 color: #fff;
 text-align: left; /* Align text to the left */
 border-radius: 5px;
 padding: 10px; /* Increase padding for readability */
 position: absolute;
 z-index: 1;
 top: 105%; /* Position the tooltip directly below the image */
 left: 50%;
 transform: translateX(-50%);
 opacity: 0;
 transition: opacity 0.3s;
 white-space: normal; /* Allows text to wrap within the tooltip */
 box-sizing: border-box; /* Ensures padding doesn’t cause overflow */
 line-height: 1.5; /* Space lines slightly for readability */

}

.tooltip-cell:hover .tooltip-text {

 visibility: visible;
 opacity: 1;

}

/* Image styling to remove any extra space */ .tooltip-cell img {

 display: inline-block;
 margin: 0 auto; /* Center image horizontally */
 padding: 0; /* Ensures no padding around image */
 width: 50px; /* Set image size if not specified directly in MediaWiki markup */

}