css - HTML table border is now showing in asp.net mvc 3 view -
so here problem illustrated couple of printscreens different attempts made solve problem. happening in asp.net mvc 3 view.
i create table :
<div id="drawform"> <table id="drawtemplate" style="border:1px solid lightgrey;border-collapse: collapse"> @for (var = 0; < model.count; i++) { if (model[i].columns.count > 0) { <tr> @for (var j = 0; j < model[i].columns.count; j++) { <td> @html.hiddenfor(x => x[i].columns[j].rownumber) @html.hiddenfor(x => x[i].columns[j].columnnumber) @html.displayfor(x => x[i].columns[j].questiontext) @html.editorfor(x => x[i].columns[j].fieldvalue) </td> } </tr> } } </table> </div>
notice styling of table, when border set 1px :
after search topic found sort of solution keeping same changing table border value 1 3px. after doing :
now can see borders , set color of border red more clear meaning, in fact can set lightgray
, it's acceptable 1 - seems sort of hack doing this, , - don't see out of ordinary don't allow normal rendering of table , of course - have normal table layout , not forced change border width because of that.
i use styling same both examples left end :
#drawform { margin: 0 auto; width: 690px; height: 800px; border: 1px solid black; } #drawtemplate { width: 690px; } tr { height: 50px; border: 1px solid lightgrey; } td { border: 1px solid lightgrey; }
so thing know - why problem @ first place , of course - there way deal besides trick border width?
p.s
html output :
<table id="drawtemplate" > <tr> <td> <input name="[0].columns[0].rownumber" type="hidden" value="1" /> <input name="[0].columns[0].columnnumber" type="hidden" value="1" /> alabala <input class="text-box single-line" name="[0].columns[0].fieldvalue" type="text" value="" /> </td> <td> <input name="[0].columns[1].rownumber" type="hidden" value="1" /> <input name="[0].columns[1].columnnumber" type="hidden" value="2" /> <input class="text-box single-line" name="[0].columns[1].fieldvalue" type="text" value="yes" /> </td> </tr> <tr> <td> <input name="[1].columns[0].rownumber" type="hidden" value="2" /> <input name="[1].columns[0].columnnumber" type="hidden" value="1" /> alabala <input class="text-box single-line" name="[1].columns[0].fieldvalue" type="text" value="yes" /> </td> </tr> <tr> <td> <input name="[2].columns[0].rownumber" type="hidden" value="3" /> <input name="[2].columns[0].columnnumber" type="hidden" value="1" /> alabala <input class="text-box single-line" name="[2].columns[0].fieldvalue" type="text" value="yes" /> </td> </tr> <tr> <td> <input name="[3].columns[0].rownumber" type="hidden" value="4" /> <input name="[3].columns[0].columnnumber" type="hidden" value="1" /> alabala <input class="text-box single-line" name="[3].columns[0].fieldvalue" type="text" value="no" /> </td> <td> <input name="[3].columns[1].rownumber" type="hidden" value="4" /> <input name="[3].columns[1].columnnumber" type="hidden" value="2" /> alabala <input class="text-box single-line" name="[3].columns[1].fieldvalue" type="text" value="no" /> </td> <td> <input name="[3].columns[2].rownumber" type="hidden" value="4" /> <input name="[3].columns[2].columnnumber" type="hidden" value="3" /> alabala <input class="text-box single-line" name="[3].columns[2].fieldvalue" type="text" value="no" /> </td> </tr> <tr> <td> <input name="[4].columns[0].rownumber" type="hidden" value="5" /> <input name="[4].columns[0].columnnumber" type="hidden" value="1" /> alabala <input class="text-box single-line" name="[4].columns[0].fieldvalue" type="text" value="no" /> </td> <td> <input name="[4].columns[1].rownumber" type="hidden" value="5" /> <input name="[4].columns[1].columnnumber" type="hidden" value="2" /> <input class="text-box single-line" name="[4].columns[1].fieldvalue" type="text" value="no" /> </td> </tr> <tr> <td> <input name="[5].columns[0].rownumber" type="hidden" value="6" /> <input name="[5].columns[0].columnnumber" type="hidden" value="1" /> alabala <input class="text-box single-line" name="[5].columns[0].fieldvalue" type="text" value="" /> </td> </tr> <tr> <td> <input name="[6].columns[0].rownumber" type="hidden" value="7" /> <input name="[6].columns[0].columnnumber" type="hidden" value="1" /> alabala <input class="text-box single-line" name="[6].columns[0].fieldvalue" type="text" value="no" /> </td> </tr>
try using css declaration, it's enough border table element , each cell
#drawform table { border-collapse: collapse; } #drawform table, .drawform table td { border: 1px solid #aaaaaa; }
also seems you'll having issue because looping through tr , td, few td's missed messing table need declare rowspan
, colspan