<!DOCTYPE html>

</head>

<body>

<div class="row">
			<div class="twelve columns">
				<h1 style="margin-left:calc(50% - 200px);color:#999;">test</h1>
				
            </div>
		    <script type="text/javascript">
        function selectText(obj) {      // Joel Folkesson
            if (document.selection) {
                var range = document.body.createTextRange();
                range.moveToElementText(obj).trimRight();
                range.select().trimRight();
            }
            else if (window.getSelection) {
                var range = document.createRange();
                range.selectNode(obj);
                window.getSelection().addRange(range);
            }
           
        }
    </script>		
  <style>
::selection
{
    background: #FF8C00!important;
    color:#fff!important;
}
  ::-moz-selection
{
    background: #FF8C00!important;
    color:#fff!important;
}    
      
::-webkit-selection
{
    background: #FF8C00!important;
    color:#fff!important;
}      
 </style>
    		
    		<hr />

<h5 style="margin-left:calc(50% - 40px);">Product page</h5>
        <table id="grid" class="responsive" style="width:1000px;">
  				<tbody>
  				  <tr onclick="">
      				<th>Field Display-name</th>
      				<th>HTML Identifier</th>
      				<th>Is Required</th>
      				<th>Data Type</th>
      				<th>HTML Type</th>
                    <th>HTML Attribute</th>
                    <th>Field Type</th>
                    <th>Event Type</th>
    				</tr>
    				<tr>
      				<td onclick="selectText(this);">pUnitPrice_pp</td>
      				<td onclick="selectText(this);" onmouseover="selectText(this);">.priceStor</td>
      				<td></td>
      				<td>Price & Currency</td>
      				<td>Div</td>
                    <td>Value</td>
                    <td>Raw</td>
                    <td>Onload</td>
    				</tr>

</tbody>
                 </table>

</body>
</html>

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground