删除表格列的边框 [英] Remove border of column of a table
问题描述
我需要代码来删除表格中所选列的左右边框
（html表格）。
如果需要对此部分代码进行任何更改，我们非常欢迎...
hi ,
I need code for removal of left and right border of selected column in table
(html table) .
If any change in this partial code is needed it is heartly welcome...
public void removecolborder()
{
mshtmlTable table1 = null;
mshtmlTableCell cell = null;
mshtmlTableRow row = null;
GetTableElement(out table1, out row, out cell);
try
{
HtmlElement table = getTableHTMLElement();
if (table != null)
{
foreach(mshtml.IHTMLTableRow row in table1.rows)
{
foreach (mshtml.IHTMLTableCell cell in row.cells)
{
row.style=????????????;
}
}
else
{
throw new HtmlEditorException("Column not selected", "");
}
}
catch (Exception ex)
{
// process the standard exception
OnHtmlException(new HtmlExceptionEventArgs(null, ex));
}
}
推荐答案
你无法按照自己的方式去做。如果您查看包含所有边框的表格，您将清楚地看到边框仅属于< table>元素或单元格元素（< td>，< th>）。
如果必须隐藏一些边框然后显示，创建两个不同的CSS样式并切换它们。如果你想切换单元格元素，你必须连续得到一组，并切换整个集合的CSS类。
例如，你可以在CSS中写这个td类：
You cannot do it the way you are trying. If you look at the table with all the borders, you will clearly see that a border only belongs to the<table>element or to the cell elements (<td>,<th>).
If some borders has to be hidden and then shown, create two different CSS styles and toggle them. If you want to toggle cell elements, you have to get a set of them in a row, and toggle the CSS class for the whole set.
For example, you can write thistdclasses in your CSS:
td { border: solid red; }
td.visibleBorder { border-width: 2px; }
td.hiddenBorder { border-width: 0; }
您可以在visibleBorder和hiddenBorder类之间切换。这是一个非常简化的样本，只是为了说明这个想法。相反，你应该单独设置属性 border-left ， border-top ，依此类推。
http：//api.jquery .com / toggleclass [ ^ ]，
另见 http://api.jquery.com/category/css [ ^ ]。
另外，jQuery允许您获取一个对象包装器，表示由一组属性选择的整个元素集：id，content，order，class等： http://api.jquery.com/category/selectors [ ^ ]。
所以，想法是操作细胞的属性而不是行，因为它是单元格携带行的边框。
使用
WebBrowser 控件，您可以，例如，操作边框颜色到使边界不可见/透明。请参阅 IHTMLTableCell.border * 属性：https://msdn.microsoft.com/en-us/library/aa741764%28v=vs.85%29.aspx [ ^ ]
另一种方法是重写整个文档或其某些DOM节点样式节点。我不确定你是否需要动态显示和隐藏一些边框。更常见的是，文档只形成一次。但是如果它必须是动态的，你可以1）首先为表格单元格预定义隐藏和可见类，并修改单元格对象集，改变它的CSS类;这样，CSS
< style> 节点内容始终保持不变; 2）将类保留在单元节点中，但通过替换文档的整个< style> 节点来更改类本身。这取决于你的目标和偏好。为此，您需要进行DOM操作。 [结束编辑]
You can toggle between classes "visibleBorder" and "hiddenBorder". This is a very simplified sample, just to illustrate the idea. Rather, you should separately set the properties border-left, border-top, and so on.
http://api.jquery.com/toggleclass[^],
see also http://api.jquery.com/category/css[^].
Also, jQuery allows you to get an object wrapper representing the whole set of elements chosen by some set of attributes: id, content, order, class and so on: http://api.jquery.com/category/selectors[^].
So, the idea is to operate cell's properties instead of the row, because it's the cell carries the row's borders.
With
WebBrowser control, you can, for example, manipulate border colors to make border invisible/transparent. See the IHTMLTableCell.border* properties:https://msdn.microsoft.com/en-us/library/aa741764%28v=vs.85%29.aspx[^]
Another approach it to rewrite the whole document or some of its DOM nodes style node. I'm not sure if you need to show and hide some borders dynamically. More usually, the document is formed just once once. But if it has to be dynamic, you can 1) in first place, predefine "hidden" and "visible" classes for the table cells, and modify the set of cell objects, changing its CSS class; this way, CSS
<style> node content remains the same at all times; 2) keep the classes in the cell nodes, but change the classes themselves by replacing the whole <style> node of the document. It depends on you goals and preferences. To do so, you need to do DOM manipulations. [END EDIT]
在css方面，解决方案1的一些附加信息。
可以通过为表格行指定类来修改单元格的样式（css）。
以下是一个示例：
On the css side, some addition information to solution 1.
The style (css) of a cell can be modified by specifying a class for the table row.
Here is an example of such:
/*set all table cell border*/
/*note: table border not set*/
table td{border:solid 1px green;border-collapse:collapse;padding:5px;}
/*for table with class Highlightable on row hover or row class highlight*/
/*set last child cell no right border width*/
table.Highlightable>tbody>tr:hover td:last-child,
table.Highlightable>tbody>tr.highlight td:last-child{
border-right-width:0px;
}
/*for table with class Highlightable on row hover or row class highlight*/
/*set first child cell no left border width*/
table.Highlightable>tbody>tr:hover td:first-child,
table.Highlightable>tbody>tr.highlight td:first-child{
border-left-width:0px;
}
/*for table with class Highlightable on row hover with row class highlight*/
/*set all child cell font colour to blue*/
table.Highlightable>tbody>tr:hover.highlight td{
color:blue;
}
<table class="Highlightable">
<tbody>
<tr>
<td>01</td><td>02</td><td>03</td><td>04</td><td>05</td>
</tr>
<tr class="highlight">
<td>01</td><td>02</td><td>03</td><td>04</td><td>05</td>
</tr>
<tr>
<td>01</td><td>02</td><td>03</td><td>04</td><td>05</td>
</tr>
</tbody>
</table>
我没有使用IHTMLTableRow，所以不确定是否可以为表格行指定CssClass。
我确实找到了这篇文章\"HOW TO]动态设置HtmlTableRow CssClass属性 [< a href =http://forums.asp.net/t/1175772.aspx?+HOW+TO+Dynamically+set+HtmlTableRow+CssClass+attributetarget =_ blanktitle =New Window> ^ ]，但不确定它是否是同一个东西:)
这是我用附加示例创建的jsfiddle：http://jsfiddle.net/ th4hwLqu / [ ^ ]
希望它有所帮助。
I have not worked with IHTMLTableRow, so not sure if a CssClass can be specified for the table row.
I did find this article "[HOW TO] Dynamically set HtmlTableRow CssClass attribute"[^], but not sure if it is the same thing :)
Here is a jsfiddle I created with addition example: http://jsfiddle.net/th4hwLqu/[^]
Hope it helps out.
这篇关于删除表格列的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
