FAQ Database Discussion Community


Print table for loop error

java,jsp,for-loop,printing,html-table
Hi every body I have this jsp page that should print all available cards after calling the method showAvailableCards(). This happens in a for cycle that loops through the ArrayList and out.print does the rest. The problem is that my for cycle prints a table for each record. How solve...

How to “count” the number of matching results on a search table

jquery,html-table
I have made a html-table with a search function. I want to display the matching result amount when search and, the total amount when search field is blank. I tried with .length but it counted all rows included hidden ones. How can I count only the displayed rows? jsfiddle currently...

Crop Text in a td CSS

html,css,html-table,crop
I'm active on a side called My Anime List. It's for tracking your Anime. On this site you can upload a custom CSS Design für your List I already achieved the design I want, but I want to improve it little by little so my first problem occurred. I want...

Find specific value of input field inside a specified td

javascript,jquery,forms,html-table
I am adding tr's dynamically to a table. I have a chosen dropdown in the second td and an input text field in the first. The chosen dropdown is gumming up the works with using ids and classes. With this code I am able to change the background color of...

how get grand parent text in a table with jquery

javascript,jquery,table,html-table,parent
I have some problems in accessing the text about a grand parent td in table. When I click on delete, I would like that my function accesses the grand parent text : "fabien" but all I received is undefined. this is my HTML: <table class="table table-striped"> <thead> <tr> <td>Name</td> <td>Delete</td>...

MVC View change specified row bgcolor

asp.net-mvc,if-statement,html-table,asp.net-mvc-views
In my MVC view, I am displaying list of data from my model in a table as shown below. How to make a specified row to change color when one of the field satisfy certain condition within my if-else statement? It does not seems like I can add a jquery...

How to use operations based on the number of user inputs?

javascript,jquery,table,html-table
So i am trying to make a simple calculator which tells students their average university mark based on their grades. JSFiddle I'm trying to get the formula to do this: Step 1: (Mark * Credit Point) Step 2: Add these totals together Step 3: Get this total and divide it...

Gather all email address from selected table cells

jquery,html-table,href,mailto
I'm helping out someone who runs a website... I've been given an example table for which we can assume I do not have control over the generated html. The goal is to be able to click some TD rows and email the address of the anchor's href contained within (after...

Adding links to

html,table,html-table
Can't figure out the appropriate way for adding links to <td>, I have tried conventional <a href"#"></a>, but for some reason messes up the table and messes the css. I have looked at other ways such as div, but I am not sure how to implement it. <div id="fftime"> <table...

Tableless web design [closed]

html,html-table
I know that HTML tables are bad, but I have designed my site using them. Here is an example: <h2><a name="tutorials">Tutorials:</a></h2> <table cellpadding="8" cellspacing="0"> <colgroup> <col class="lcol"/> <col class="rcol"/> </colgroup> <tr> <td><a target="_blank" href="http://www.ldraw.org/Article529.html">Link</a></td> <td><b>LDraw to SimCity 3000 Unlimited Tutorial:</b> A tutorial describing how to import LDraw models into...

Absolute table with relative height and image inside

html,html-table
I have the following code table.charinfo { position: absolute; top: 0; left: 0; margin: 10px; background-color: red; height: 10%; width: 40%; } table.charinfo tbody { height: 100%; } table.charinfo tbody td { height: 100%; vertical-align: top; } table.charinfo tbody td.charimage img { height: 100%; } <table class="charinfo"> <tbody> <tr> <td...

Is it possible to cross out cells in an HTML table?

html,css,html-table
I want to create an HTML table in which I am able to cross out cells as shown in the following drawing: I originally thought about doing a CSS right triangle in the cell, but I couldn't figure out how to color just the hypotenuse and not the other two...

Unable to click button inside table row

html,css,twitter-bootstrap,button,html-table
The Edit/Delete buttons are unclickable when inside the table. (The mouse pointer doesn't change like usual either) Anyone have a clue as to what's going on? Here's the fiddle: https://jsfiddle.net/xt7spu41/ <td class="report-elements report-tools"> <button class="btn btn-default">Edit</button> <button class="btn btn-danger">Delete</button> </td> ...

How to make multiple left columns fixed and scroll the the rest columns in HTML table?

html,css,html5,css3,html-table
I am having trouble of freezing multiple columns or column-group and making the rest columns scrollable. I tried the solution like how do I create an HTML table with fixed/frozen left column and scrollable body? but it only works for one column. If I try to freeze multiple columns, they...

CSS background property applied to HTML Input element within Table cell

html,css,background,html-table,html-input
JSFiddle When you hover over an input field in the table, the entire cell turns grey except for a few pixels at the top. Why is that? I've tried setting everything I can think of (margin, padding, box-shadow, etc) to 0 or none, but to no avail....

Making an HTML table scalable across resolutions

html,css,html-table
I'm trying to create a table that maintains the same aspect ratio and size across multiple resolutions. Here are a few characteristics of the table I'm building: There can be any number of rows and columns. Each td should ALWAYS have a minimum height of 50px and a minimum width...

“Splitting” a table?

html-table,column-width
Is there any way to "split" table rows so I can set the column width independently? Here is what I mean: ************************************ * 70% * 30 % * ************************************ * 20 % * 80 % * ************************************ I know the following ways to do it: Use 2 tables. But that...

Apply class to

javascript,table,html-table
How can I find the class name of the <p> element contained within each <td> element then add that class to the <td> element's class list? <table> <tr> <td colspan="1"> <p class="Hello_blue">Hello Stack Overflow1</p> </td> <td rowspan="1" colspan="2"> <p class="Hello_red">Hello Stack Overflow2</p> <p class="Hello_red">defines red color,that class want to apply...

Make table size within TD same as containing TD

jquery,html,css,html-table
For what i need to do, I need to have a table within another table's TD, and need the cells of that table to be the same height and width as the containing table. A few notes: The containing TD CANNOT have a fixed height or width, it is created...

echo an image inside html table using php

php,html,arrays,html5,html-table
I tried to generate a html table with only 2 cells using PHP. First table cell is an image and second cell has another table. I can put the data which I want in second cell (in table format). But failed to display image in first table cell. Searching the...

Unable to Get Element with ID in VB.Net

asp.net,vb.net,html-table
I have the below code to retrieve the table element when the checkbox is checked. With this, I could get the table ID. When I try to get the HtmlTable with the ID, it throws the null reference exception. Once I get the table element with its ID, I need...

getting values of table column based on id

javascript,jquery,html-table
I have created a table in which I want all the values within the Name columns(which is hidden). I have used the below jquery code which uses nth-child(4) for getting all the values, but the issue is that this table is coming from another application, so say if the table...

Bootstrap table with a sidebar

twitter-bootstrap,responsive-design,html-table
I've been reading about the grid system and played around with my code over and over, but can't get the website to look like how I want it to. I want a sidebar next to a "content" area (basically a table). Here is an image to help the visual. Top...

How to make table fit in parent div

css3,table,html-table
I have a table that should not exceed the width of the parent div's width, how can this be solved in CSS only? I have an example here JSFiddle HTML <div id="parent"> <table id="child2"> <tr> <td>Hi! andgds;lfgjl;dksfjglkdfgjldsfk;gjdlf;kgjdlfkgjdflkgjdl;fksgjdl;ksfgjlkdfsjglkdfsjglkdsfjglkdjsfgkljdsflkgjdflksgjl;kdsfd it's not working!</td> <td>Hi! andgds;lfgjl;dksfjglkdfgjldsfk;gjdlf;kgjdlfkgjdflkgjdl;fksgjdl;ksfgjlkdfsjglkdfsjglkdsfjglkdjsfgkljdsflkgjdflksgjl;kdsfd it's not working!</td>...

How to make a
expand to fill space, without stretching parent if there is no space to fill?

jquery,html,css,height,html-table
In a page I am working on, I have a table inside of another table. The inner table may get quite large, so I want it to have overflow-y: scroll so it doesn't make the outer table unnecessarily large. I understand that to make this work, I need to put...

How can I generate an HTML table from an DB2 XML column?

xml,xsd,db2,html-table
I have generated this table in DB2: CREATE TABLE "MGMT"."SYSTEM" ( "SYSTEM_ID" INTEGER NOT NULL GENERATED ALWAYS AS IDENTITY ( START WITH 1 INCREMENT BY 1 MINVALUE 1 MAXVALUE 2147483647 NO CYCLE CACHE 20), "NAME" VARCHAR(300) NOT NULL, "SERVICE" VARCHAR(200) NOT NULL, "VERSION" VARCHAR(150) NOT NULL, "CONFIGURATION" XML NOT NULL...

MySQL - How to show in multiple columns html table, single column of mysql table

php,html,mysql,mysqli,html-table
I want to know how to show in my php file with html a table with multiple columns but in that columns show only a single column results from mysqli What I have for now is: <?php include "dbinc.php"; $con=mysqli_connect($servername,$username,$password,$database); $letramasculinos = mysqli_query($con,"SELECT nome FROM nomes WHERE nome LIKE '$_POST[letra]%'...

HTML table with scrollbar inside bordered container

html5,css3,scrollbar,html-table
I'm trying to design an HTML table, with a scroll. The design I'm trying to make is a scrollbar inside its own container, which has a border of itself. I've tried lots of examples and didn't come up with a solution. I couldn't change the view of the scrollbar. The...

Focus on table cell/column

javascript,jquery,html,css,html-table
I'm using a table for display some text (a table that for each weekday displays several rows of information). The tables always contains information for the current day, so I would like to focus the current day (the column, or at least the <th> of the column). What do I...

Why does cellpadding=“0” not remove vertical padding around small images? [duplicate]

html,css,html-table
This question already has an answer here: Why an image inside a div has an extra space below the image? 6 answers I put two tiny images (8px) in a table with no cell padding, but there still is padding above and below the pictures. This only happens with...

How to prevent PHP pushed HTML tables exceeding the length of the page

php,html,css,screen,html-table
I am still a novice and would appreciate any assistance you can provide. I am trying to prevent an HTML table from exceeding the length of the page. I am currently parsing a csv with PHP and looping the array information into an HTML table. The table is to be...

Why are THs bolder than TDs and how to avoid it?

css,fonts,html-table
Edit June 14, 2015 - from this question, I learned that "bolder" and "lighter" are relative. The source that I referenced before said that "bolder" were an absolute measure and means "extra bold". I changed that source now :) (selfhtml.org wiki). Thanks all for your help. Please consider the following...

Dynamically add columns to table (with colResizable plugin)

jquery,angularjs,html-table
I'm using the plugin colresizable to manipulate column width. What I would like to do is being able to dynamically add columns. I tried that: <body ng-controller='myCtrl'> <table style="width: 100%;height:300px" col-resizeable> <tr> <td ng-repeat='column in columns track by $index' ng-style="{'background':column}">content</td> </tr> </table> <button type='button' ng-click="addColumn()">Add</button> </body> Here is a plunker...

Override table-specific attributes with CSS?

html,css,html-table
Is it possible to override the table-specific attributes/values shown below (border, cellpadding, cellspacing) with CSS? I can't get to the HTML here to remove those attributes/values, so an external CSS file is all I have to work with! <table border="1" cellpadding="1" cellspacing="1"> ...

Remove duplicate row from output table

php,sql,inner-join,html-table
I want to remove the duplicate output in my table, the table looks like this Order No Customer Name Order 1001 John Milk 1001 John Egg 1002 Mark Milk 1002 Mark Bread I want it to be like this Order No Customer Name Order 1001 John Milk Egg 1002 Mark...

Truncate cell contents when needed, otherwise keep the table as narrow as possible

html,css,overflow,html-table
I have an HTML 5 table with three rows and four columns (two attribute/value pairs per row) on a responsive page (Bootstrap). In desktop view (or with little content), I would like the table not to fill the entire width available, just enough to show the data. Columns should have...

Identical CSS working on JSFiddle, broken in browser

css,responsive-design,html-table
I'm trying to make responsive tables using the No More Tables approach. I've simply copied and pasted the code from the example above. It works fine on JSFiddle: http://jsfiddle.net/wcp62x7t/ But identical code in my browser does not work fine. The tables do not behave nicely when I reduce the size...

Aligning images in HTML tables

html,css,image,alignment,html-table
I have a 1x2 HTML table that will be the heading of an email. The first column contains a linked image, the second a heading. <table> <tr> <td width="50%" style="text-align:left; padding-left:10%;"> <a target="_blank" href="http://www.google.com/"> <img src="img/logo.jpg" alt="Logo" style="width:30%; height:30%;" /> </a> </td> <td width="50%" style="text-align:right; padding-right:10%;"> <h2>Order Confirmation</h2> </td> </tr>...

unwanted photo rotation

html,html5,image,html-table
I have an image embedded in a table using HTML5. The image is being rotated automatically 90deg counterclockwise, and there is no CSS being applied, nor Javascript (there used to be, hence the class parameters on some of the tags, but I commented out the <style></style> block in the <head>....

Displaying a nested array in an HTML table

php,html,arrays,nested,html-table
This is a simple problem that I've been trying to solve for several hours. I have an array containing information of several students and marks they scored in tests. There are 8 subjects in total, with each subject having 5 parameters. The array looks like below: Array ( [Ron] =>...

Python Beautiful Soup Table Data Scraping Specific TD Tags

python,table,web-scraping,beautifulsoup,html-table
This webpage... http://www.nfl.com/player/tombrady/2504211/gamelogs has multiple tables on it. Within the HTML all of the tables are labeled the exact same: <table class="data-table1" width="100%" border="0" summary="Game Logs For Tom Brady In 2014"> I can scrape data from only the first table (Preseason table) but I do not know how to skip...

Calulate the sum of total present in a row - Dynamic HTML Table

mysql,dynamic,sum,html-table
I have a dynamic HTML table. Which has A,B,C,D,E... Columns. My data as well as columns are dynamic. I haved added a new column total at the end. Where i need to add the values present in each column and put it in the last ----- ----- ----- ----- -----...

Bootstrap table arrangement

html,table,html-table
what is the term of this table arrangement? http://i.stack.imgur.com/qENZq.png and I want to make a like that using bootstrap, but I fail so many times. (also I already google it) that is why I am here to look someone know how to do it....

Replace to another column if exits in MySql

php,mysql,html-table
I have a HTML table having values from Mysql. My HTML table looks like this ------- ------ ------ ------ type name b_id Edit ------- ------ ------ ------ Laptop mac E1:23 edit Desktop dell D2:45 edit I am inserting values from input textboxes for type and name. And a select dropdown...

Adding a clickable table caption with jQuery

javascript,jquery,html,html-table
I want to add a clickable caption to a table with jQuery. I add it like this: $("table.table-legend").prepend('<caption class="edit-select"><a href="javascript:;">Select All - None</a></caption>'); This works and I do get a clickable caption, but I can't figure out how to define the function that gets called. I tried: $('table caption a').on('click',...

css specify first tr in table asp.net datagrid

asp.net,css3,datagrid,html-table,internet-explorer-10
I'm new to CSS and I'm trying to accomplish the following on IE10: I have the asp datagrid with the css class "maintbl" <asp:DataGrid CssClass="maintbl" ID="dg" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundColumn ReadOnly="true" DataField="UpdateOn" DataFormatString="{0:MMMM d, yyyy}" HeaderText="Date Modified" SortExpression="UpdateOn" ></asp:BoundColumn> <asp:BoundColumn DataField="Message" HeaderText="Message" SortExpression="Message"></asp:BoundColumn> </Columns>...

HTML spacing if value is empty

html,css,string,html-table
I'm having difficulties in formatting my HTML page. As you can see from the source code, it's a table where each row contains a formatted list of records dinamically populated by my webapp. In the case one of the columns has an empty value, I would like to keep the...

Extract a Cell/Td/tabledata value from a given row of a table using javascript/jquery

javascript,jquery,html,asp.net-mvc,html-table
Here is my html table that is used in the Asp.net MVC razor view <table class="table-striped table-bordered"> <thead> <tr> <th class="col-md-2"> Id </th> <th class="col-md-4"> Description </th> <th class="col-md-3"> Quantity </th> <th class="col-md-3"> AssetType </th> </tr> </thead> <tbody> @foreach (var i in Model) { <tr> <td class="col-md-2"> @i.Id </td> <td...

One of the in dynamically created table has to be width unassigned to force other width

css,html5,twitter-bootstrap,razor,html-table
I am getting an issue which I don't know what would be the best way to explain. I am creating a dynamic table with HTML 5. As its dyanamic so I am forming a loop for creating tr and td as per the data. td is being created for every...

Creating HTML table using PHP while loops to display data and allow user to submit to specific row

php,html,mysql,while-loop,html-table
I'm currently creating a dummy website under the scenario of an animal adoption agency, where I need to creating a HTML table that displays all animals available for adoption and allow the user to send an adoption request out to be approved by staff. I have created this table using...

How to align elements of two seperate ng-repeats in a table

angularjs,table,angularjs-ng-repeat,html-table
I have am repeating the elements of two arrays with two seperate ng-repeats. The elements of the first array are labels that correspond to a stat from the second array. I would like to display them in the same table so that the cells take up the widths of the...

Setting table column width in CSS (if necessary, JavaScript)

javascript,css,css3,html-table
Okay, I have changed from using JavaScript to CSS in aligning the column width. But for some reasons it still won't line up. I want every td in a fixed width percentage, and the thead with the same too. Eg. If you search "cherry" the width will change, but I...

Using Javascript prompts to dynamically create table (not working)

javascript,html,html-table
This is what I have so far but it doesn't even prompt the user, it shows a thin black line (which I think is the border) <html> <head> <meta charset = "utf-8"> <title>Dynamically creating a table</title> </head> <body> <table style = "width:100%" cellspacing="5" border="2"> <script type = "text/javascript"> var running...

Problems putting a border on a HTML table

html,css,html-table
I am trying to achieve this effect: I have tried the following but it does not work at all (no borders appear at all). Can anyone explain how to achieve what I would like. <style type="text/css"> .withBorder { border: 1px; } .withoutBorder { border: 0px; } </style> <table> <tr> <td...

How to arrange table td using rowspan

html,css,twitter-bootstrap,html-table
I have to arrange table cells as shown in the image below, I am using bootstrap, and I have adjusted it using colspan. but it not works as like in the image. I have fiddeled here <table class="table table-bordered table-responsive"> <thead></thead> <tfoot></tfoot> <tbody> <tr> <td rowspan="4">a</td> <td rowspan="2" colspan="2">aaa</td> </tr>...

Can't print 9x9 table correctly

php,html,html-table
The code is giving first 10 numbers in first row and 9 numbers in other 7 rows and 8 numbers in last row. How can I obtain the 9x9 matrix so that all the rows have 9 numbers? I have tried everything, but nothing works. Is there any way to...

Showing an array in a grouped table

javascript,angularjs,html-table
I have a JSON array like this: Array = [{"type":"x", "name":"a1"}, {"type":"x", "name":"a2"}, {"type":"y", "name":"a3"}, {"type":"y", "name":"a4"}] Now, I'd like to show it in a table, using Angular, so that it takes this form: x a1 a2 y a3 a4 The table shows the type and then the name of...

Drop down in HTML table and have selected value in table data in javascript

javascript,php,ajax,json,html-table
I have Dropdown in html Table <td contenteditable="true"> <select class="currentCulture form-control"> <option value="0" >1</option> <option value="1" >2</option> <option value="2" >3</option> </select> </td> <td contenteditable="true">Stir Fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">Stir Fry</td> I return the whole data of HTML table to my controller in json form with ajax call var table =...

AngularJS ng-repeat colspan rowspan issue

angularjs,html-table,col
<table border=1> <thead> <tr> <th>Group</th> <th>Status</th> <th>Name</th> <th>Gender</th> </tr> </thead> <tbody ng-repeat="group in groups"> <tr> <td rowspan="3">{{group.name}}</td> <td rowspan="3">{{group.status}}</td> </tr> <tr ng-repeat="member in group.members"> <td>{{ member.name }}</td> <td>{{ member.gender }}</td> </tr> </tbody> </table> The above code gives...

how to properly insert
with inside a table?

html,html-table
I've searched online and I can't find an answer, so I'm going to ask this question. The new data will always be formatted in the following and will be populated in id="content" <tr> <td>name</td> <td>age</td> <td>gender</td> </tr> I read you need to have <div> inside a <td> if you're going...

max-width for cell in wide table

html,css,width,max,html-table
I have a table which is very wide. Much wider than the width of the screen due to most of the columns having white-space: nowrap. I have a few "wrapping" columns with white-space: normal. These columns are squished extremely narrow. Setting width: 500px has no effect. Setting min-width: 500px forces...

Automatic Pagebreak in Dynamically generated TCPDF HTML page

php,pdf-generation,html-table,tcpdf,html-to-pdf
I am dynamically pulling content into an HTML table that is used to build a PDF using TCPDF. I need the page to auto-pagebreak when the content becomes too long for the page, but it seems to just keep appending to the first page even if it becomes longer than...

Table cell uses alot more width then it needs

html,css,table,html-table,newsletter
I'm designing a newsletter template and I'm having an issue with a table that contains graphics and text in the same row. For some reason, the graphic pushes the text all the way to the right. I'd like the text to be "connected"/left aligned with the icon as the template...

Why does this jQuery not only not work, but break all the other jQuery?

jquery,sharepoint-2010,html-table
I am doing some "fancy" hiding (slideUp and slideDown) of elements on a Sharepoint WebPart. I added another handler, though, for a button: $(document).on("click", '[id$=btnAddFoapalRow]', function (e) { alert('you mashed the foapal button'); if ($('[id$=foapalrow3]').css('display') == 'none') { $('[id$=foapalrow3]').slideDown(); } else if ($(['id$ = foapalrow4]').css('display') == 'none') { $('[id$=foapalrow4]').slideDown(); }...

thead style not applied

html,css,html-table
For the following table, the text in the thead element doesn't respond to any CSS rules. I thought it would inherit the rules from thr table.declensionTable element, but it doesn't. I created a CSS rule with the table.declensionTable thead selection, but that didn't work either. What am I doing wrong?...

How to sort table according to name

javascript,php,html,sorting,html-table
I have a table I would like to sort in my PHP file: //Table headers echo "<tr><th>ID</th>"; echo "<th>Name</th>"; echo "<th>Badge Number</th>"; echo "<th>Category</th>"; echo "<th>Action</th>"; . . Some codes . . echo "<tr>"; echo "<td id=\"row$count\">$id</td>"; echo "<td>$name</td>"; echo "<td>$badge_number</td>"; echo "<td>$category</td>"; echo "<td><input type=\"button\" name=\"delete\" value=\"Delete\"...

Reading file into table using PHP

php,html,html-table
I will start by saying I am fairly new to all HTML/CSS/PHP, but particularly PHP. I have a page, index.php that is just some basic HTML for the page, but I need the PHP for a script to read data from a couple files into a HTML table. <table id="table">...

Is it possible to apply position: sticky to or element?

css,css-position,html-table,sticky
Is it possible to apply position: sticky to <thead> or first <tr> tag to make table header stuck at the top of viewport while scrolling the table body?

How to parse JSON from file using PHP then extract as TABLE

php,arrays,json,file,html-table
I'm just stucked with this. How could I read a json file using PHP. I have file.json with the following data sample [ { "lastname": "John", "firstname": "Michael" }, { "lastname": "Nick", "firstname": "Bright" }, { "lastname": "Cruz", "firstname": "Manny" } ] Can you share me a php code how...

How to fill textbox values in dynamically created rows in an HTML Table using jquerry

html,html-table
I have started learning jQuery recently and need help in writing a script - I'm doing this as practice. My code for the HTML is below. On button click I want to create rows in the table and fill values from textbox using jQuery <html> <head> <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <script></script>...

Make last td as row

html,css,table,html-table
Please take a look at https://jsfiddle.net/wYA9K/55/ <table> <thead> <th colspan="1" style="width: 10%">TH1</th> <th colspan="1" style="width: 60%">TH2</th> <th colspan="1" style="width: 30%">&nbsp;</th> <th>&nbsp;</th> <-- what should i do?? </thead> <tr> <td colspan="1" style="width: 10%">a</td> <td colspan="1" style="width: 60%">b</td> <td colspan="1" style="width: 30%">c</td> <td>UNDERNEATH SPANNING WHOLE...

Is there a pure-CSS way to highlight a html table column on hover?

html,css,hover,html-table
Is there a pure-CSS way to highlight a html table column on hover? So when you hover over on <td>, all of the other <td> of that same child position would take on the same style? I looked at <col> tag, but didn't seem to do what I expected....

What CSS do I need to get this html to appear as it does in the original text?

html,css,html-table
I want to represent a two-columned list (two fictitious baseball teams) as it appears in the original text, which looks like this: Here is how it actually looks at present (as you can see, 9X uglier than a bag of butts): You can see it "live" here at the jsfiddle;...

How to show/hide hidden HTML table rows using JavaScript (no jQuery)

javascript,html,css,toggle,html-table
Edit: This has been answered below. I would like to have an HTML table that has hidden rows between each row with more information about the top level rows. When clicking an expand/collapse image link in the first column, the hidden row's visibility will toggle from display:none; to display:table-row;. I...

CSS Fixed column width with scroll bar

html,css,html-table
I'm a newbie regarding CSS and HTML, so apologies if this seems like a stupid question. But for the love of god, I can't seem to figure it out. I only get a horizontal scrollbar and not a vertical one. In the code below I try to achieve that the...

Odd TABLE sizing behaviour

html,css,html-table
I can't understand why the table sizing is working the way it is. Here is my example HTML: <!DOCTYPE html> <html> <head> <title>Table sizing test</title> </head> <body> <style> .tab-strip { overflow: hidden; white-space: nowrap; } .tab-strip .tab-button { display: inline-block; } .tab-strip .tab-button td { background-color: yellow; } .tab-strip .tab-button...

Assigning css to an element based on the value in that element

css,html5,html-table
I am working on a web application which as a table few columns with some data in it. Particularly I have a column named Change binded with some data under it as follows <td data-bind="text: GradeName"></td> <td data-bind="text:Price"></td> <td data-bind="text:Change"></td> The value of Change can be negative or positive but...

getElement from table data in same row

javascript,html,html-table
I made a web page using javascript and html5. Its like a free-board. But there are some problems that I can't resolve. Table has selectors and button at first row and others have check box at first td and number at second td. If Checkbox is checked, the number of...

Freeze table header while allowing dynamic widths

html,css,html-table
The solutions I've seen for freezing a table header row is by creating another table with just the header, making the first table's header hidden. This works only if the widths are pre set. But I want my table's columns to be sized according to their contents. I also want...

Jquery split on row does not work if null

jquery,html-table,tr
Trying to break a td text on | symbol and display as- http://jsfiddle.net/XFC5u/102/ function addBR($el) { $el.html($el.html().split('|').join('<br/>')); } addBR($('.myClass')); my issue is when first myClass value is null it shows all following row value null. like- http://jsfiddle.net/XFC5u/121/ Doing something wrong in looping?? please suggest....

How to get table fully copied from html to MS Word?

html,css,html-table
I'm trying to get the table in html fully copied from browser (works in Chrome) to Word document. What happens is that last row's border doesn't get passed in Word. Take the code: HTML: <table id="t6"> <tr><th></th><th>raw_alpha</th><th>std.alpha</th><th>G6(smc)</th><th>average_r</th></tr> <tr><td>gse1</td><td>0.88</td><td>0.88</td><td>0.88</td><td>0.45</td></tr>...

jQuery UI draggable: get the underlaying element at drag-stop

jquery,html5,jquery-ui,html-table,jquery-ui-draggable
Is it possible to get the underlaying element of an dragged element? My specific task is to drag a td element. If the dragstop event is fired I want the underlaying element. The underlaying element is also a td. How could I achiev this? Here is my HTML code: <table...

Making a table with “mysql_fetch_array();” not working properly

php,html,mysql,datatable,html-table
I'm trying to make a page that fetches information from a database and posts it to a webpage. I tried using the "table border" and "table-height"command, but I think Ive done it wrong. Because whenever I echo something now, it shows up above the table, even though the code is...

Add a small space between tables

css,asp.net,html5,html-table,repeater
What I want to do is add a small space between my tables. When I use <p> or <br> the space is too big. Does anyone know how to make a really small space between tables? Here's what it actually looks like versus what I want it to look like:...

Html table with Row lines hidden

javascript,html,css,html-table
<!DOCTYPE html> <html> <body> <table border="1" style="width:100%"> <tr> <th>A</th> <th>B</th> </tr> <tr> <td>10</td> <td>10</td> </tr> </table> </body> </html> The above html data provides a table which has corresponding rows and columns. I want a format in which lines between rows should be hidden only column lines and table border...

overlapping css of a table property with another

html,css3,html-table
I am working on a web page which has a table with several columns as follows In the above picture each td has blue border but I am trying increase thickness for left border of Ask1 using the following markup and CSS HTML <td class="clientOffer1">Ask1</td> CSS clientOffer1 { border-left: 3px...

Given a table whose headers have backgrounds, can you CSS-rotate only the text in the headers?

css,html-table
Here's a JSFiddle that has a simple table from an internal CMS: <table class="rotated-text"> <thead> <tr> <th>property</th> <th>San Francisco, CA</th> <th>New York, NY</th> <th>Washington, DC</th> <th>Charlottesville, VA</th> </tr> </thead> <tbody> <tr> <td>days of sunshine</td> <td>260</td> <td>200</td> <td>210</td> <td>220</td> </tr> </tbody> </table> I'd...

create dynamically table from mysql result with rowspan

php,mysql,html-table
I create a HTML table from Mysql output in this way: $i = 0; while ( $row = mysql_fetch_assoc($result) ) { if ( $i == 0 ) { echo "<tr>"; foreach ( array_keys($row) as $fieldName ) echo "<th>".$fieldName."</th>"; echo "</tr>"; } echo "<tr>"; foreach ( $row as $value ) echo...

Unable to make the table body scroll

html,css,html5,css3,html-table
Please have a look at the below code <html> <head> <style> #table-wrapper { position:relative; } #table-scroll { height:150px; overflow:auto; margin-top:20px; } #table-wrapper table { width:100%; } #table-wrapper table * { background:yellow; color:black; } #table-wrapper table thead th .text { position:absolute; top:-20px; z-index:2; height:20px; width:35%; border:1px solid red; } </style> </head>...

scale html table before printing using css

css,html-table,printing-web-page
I have a table as the entire content of an HTML document (for legitimate table purposes...it is table data, not for layout). Some cells have widths and heights specified (not through css but using the old sizing inline in a table structure), but the overall table does not have a...

get dynamic value every value of td of tr jquery

javascript,jquery,html,html-table,tr
$("#student").find("tr:gt(0)").remove(); for (var i = 0; i < data.length; i++) { tr = $('<tr/>'); tr.append("<td id='id'>" + "<a class=\"school_id\" id=" + data[i].id + " href='#' value='" + data[i].id + "'>" + data[i].id + "</a>" + "</td>"); tr.append("<td id='lastname'>" + data[i].lastname + "</td>"); tr.append("<td id='firstname'>" + data[i].firstname + "</td>"); //$("#td_id").attr('width', '15%');...

How to element content into new element

html,html-table,element
Is there a way to move content within a element into a another element for example : <td>move this content</td> <div>into here</div> ...

How does one make one table column header taller than the rest?

html,css,html-table
I have a table of data, with some columns more important than the others and need a way to visually distinguish them. <table> <thead> <tr> <th>A header</th> <th class="important" colspan="2">An important header!</th> <th class="important" >Also important</th> <th>Boring header</th> </tr> <tr> <th>Sub header</th> <th>Part 1</th> <th>Part 2</th> <th>Sub header</th> <th>Sub header</th>...

2 column table or definition list for semantically correct HTML?

html,html5,html-table,semantic-markup
I frequently have to display a series of name-value pairs, as I'm sure most web developers face. Typically in the form of properties. What is the semantically correct HTML way to do this? <table> <tbody> <tr> <td>Name</td><td>Jimmy</td> <td>Age</td><td>33</td> <td>Gender</td><td>Male</td> </tr> </tbody> </table> or <dl> <dt>Name</dt><dd>Jimmy</dd> <dt>Age</dt><dd>33</dd>...

Is it wise or acceptable to create a table with a different number of columns (td) for each row (tr)

html,table,html-table,tr
I was wondering if it is wise or acceptable to create a table with a different number of columns (td) for each row (tr) using html. For example: <table> <tr> <td>title</td> </tr> <tr> <td>text</td> <td>and more text</td> </tr> </table> Do I have to include the colspan? ...

How to use modulo operator for table row and col structure?

javascript,angularjs,html-table,modulo
I have following table with td written using ng-repeat: <div class="row"> <div class="col-sm-10"> <table class="customAttributesTable"> <tbody> <tr> <td class="col-sm-2" ng-repeat="customField in basicInfoCustomFields"> <label for="customer">{{ 'CUSTOMER' | translate }} </label> <input type="text" ng-model="order.customer.name" class="form-control" id="customer" /> </td> </tr> </tbody> </table> </div> </div> I would like to ask how can i do...

How to add colspan and text in cell?

javascript,html-table,tablerow
I'm getting an error when I insert a row and a cell, add a text (innerHTML, textContent) and a colspan. The error reads: Safari: "TypeError: Attempted to assign to readonly property." Chrome: "Uncaught TypeError: Cannot assign to read only property" If I remove the text, the colspan will work and...

Force a line break after space in words in element

html,css,asp.net,gridview,html-table
I have a table/grid view and in the <td> there are 2 words like "C2 Sunday". I want a line break up after C2 and it appears like, C2 Sunday Is it possible to do that? Kindly help me with this. Now it displays like "C2 Sunday" and i want...

Do not add border first time HTML

html,css,row,border,html-table
Not sure how to go about this piece of code (CSS): td { border-bottom: solid 2px lightgray; } (featured in the jsfiddle below), to not function but only for the first button click. The reason behind this is because then there would be 2 bottom borders. http://jsfiddle.net/julianbuscema/yqh2rqh0/38/ Pretty much on...

Javascript get the sum of each array seperate

javascript,arrays,xml,html-table
I've been trying to figure out how to perform this action properly and I'm sure I'm being an idiot (new to code here). I have a xml file (shown below), that I am parsing and attempting to build multiple tables for each data set based on the node "testset". The...