Dear Rick,
please is there any way to obtain this result into a grid?
I need to use one column like a progressbar and to use the color to indicate the percentage.
(What I show is an example created with Photoshop).
Thank you very much for support
Yes...
You can use stacked elements with position:relative. Basically you'd add a style="position:relative"> to <td> then add two <div> with absolute positioning with a z-order. The background you stretch out across the cell and then set the width: XX% to get the background 'bar'.
I really shouldn't be doing this for you, but here you go:
<html>
<head>
<style>
td { border: 1px solid; padding: 5px }
td:first-child { min-width: 150px; }
td.percent-cell {
position:relative;height: 40px;width: 100%;
}
td.percent-cell div:first-child {
position: absolute; z-index: 1; left: 0; top: 0; right: 0; height: 100%; background: lightsteelblue
}
td.percent-cell div:nth-child(2) {
position: absolute; z-index: 2; left: 0; top: 0; right: 0; background: transparent;width: 100%; padding: 5px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<table style="width: 100%">
<tbody>
<tr>
<td>
Label
</td>
<td class="percent-cell">
<!-- background -->
<div style="width: 80%"> <!-- percentage should work here for the bar width -->
</div>
<div>This can be some long text that wraps</div>
</td>
</tr>
<tr>
<td>
Label
</td>
<td class="percent-cell" >
<!-- background -->
<div style="width: 55%;"> <!-- percentage should work here for the bar width -->
</div>
<div>This can be some long text that wraps</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Looks like this:
The one problem with this is that the height of the control has to be some fixed height or it doesn't work reliably. So you have to make sure your content fits consistently and you may also have to tweak the padding and placement.
+++ Rick ---
Fantastic!!
I know WC is limitless.
Thank you again, Rick.