Targeting specific column in table
This should work (except on IE8 and below):
table.players td:nth-child(2) { width: 200px; }
Using a specific column in a Datatable
The subcategory URL ended up in the table...how would I target the other 2 to in the loop
The same way, i.e.:
foreach (DataRow row in dt.Rows)
{
html.Append("<tr>");
html.Append("<td>");
html.Append("<a target='_blank' href= " + "'" + row["subCategoryURL"].ToString() + "'" + " >");
html.Append(row["subCategoryName"].ToString());
html.Append("</a>");
html.Append("</td>");
html.Append("<td>");
html.Append(row["subCategoryDescription"].ToString());
html.Append("</td>");
html.Append("</tr>");
}
row["subCategoryName"] will get you the value of the "subCategoryName" column of the current row.
Use JavaScript to target nth column in table or nth cell of every table row
You can iterate rows
and return an array of values
let tds = Array.from(rows, row => row.cells[n]);
How to target a specific column or row in CSS Grid Layout?
To style an arbitrary row, you could use a wrapper element with its display
set to contents
. See the code snippet below:
.grid-container { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 2px;}
.grid-item { border: 1px solid black; padding: 5px;}
.grid-row-wrapper { display: contents;}
.grid-row-wrapper > .grid-item { background: skyblue;}
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-row-wrapper"> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> <div class="grid-item">10</div> </div> <div class="grid-item">11</div> <div class="grid-item">12</div> <div class="grid-item">13</div> <div class="grid-item">14</div> <div class="grid-item">15</div> <div class="grid-item">16</div> <div class="grid-item">17</div> <div class="grid-item">18</div> <div class="grid-item">19</div> <div class="grid-item">20</div></div>
How can I restrict a css to particular column in datatable which has drag and drop
You can use columns.className
option to assign class name to a column. If you're using ColReorder extension, class name moves with the column if it's dragged and dropped.
For example, see below how class col-name
is assigned to the first column.
var table = $('#example').DataTable({
colReorder: true,
columnDefs: [
{
targets: 0,
className: 'col-name'
}
]
});
See this example for code and demonstration.
How to get a specific column value when using Datatables Selected_Row
input$foo_rows_selected
stores the row index of the selected rows. To get the value of a specific column for the selected row, simply subset the data frame.
output$selected_var <- renderText({
master_playeridlist[input$players_rows_selected, "id"]
})
Related Topics
"Dynamic" CSS Id Names? How to Add Them to The CSS File
Cumulative Layout Shift with Bootstrap 4 Grid
Why Use Percentage Value for Div's Width in CSS
How to Use Whitespace: 'Pre-Wrap' on React
How to Customize Responsive Columns and Inputs Fields in Twitter Bootstrap
Pixel Border and Percentage Width in Proportion
How to Add Space After a Colon in CSS with Sublime Text 2
How to Evenly Space Navbar Elements in Bootstrap 4
Is There Any Online Text Editor for HTML, CSS with Saving and Syntax Highlighting Facility
Need to Center Image in Web Page via CSS
Overflow-Y Scroll Always Show Even It Not Overflow
Center Content in a Absolute Positioned Div
CSS: Select Last Ordered Flex Children
Bootstrap 3 Multiselect Plugin as Form Element