You should use the `colspan` attribute on the first row&#39;s td.  
`Colspan=&quot;3&quot;` will set the cell to flow over 3 columns.

    &lt;table width=&quot;900px&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
        &lt;tr&gt;
            &lt;td align=&quot;center&quot; colspan=&quot;3&quot;&gt;check&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td align=&quot;center&quot;&gt;check&lt;/td&gt;
            &lt;td align=&quot;center&quot;&gt;check&lt;/td&gt;
            &lt;td align=&quot;center&quot;&gt;check&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;


You want to use the `colspan` attribute like this:

   

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

     &lt;table width=&quot;900px&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
        &lt;tr&gt;
            &lt;td align=&quot;center&quot; colspan=&quot;3&quot;&gt;check&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td align=&quot;center&quot; &gt;check&lt;/td&gt;
           &lt;td align=&quot;center&quot;&gt;check&lt;/td&gt;
           &lt;td align=&quot;center&quot;&gt;check&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;

&lt;!-- end snippet --&gt;



You can use colspan

    &lt;td align=&quot;center&quot; colspan=&quot;3&quot;&gt;check&lt;/td&gt;


http://www.w3schools.com/tags/att_td_colspan.asp

If you&#39;re using **JSX** (*React*) it should be written like this. The `s` in `colspan` is capitalized and the value is a number instead of a string.

    &lt;td colSpan={3}&gt;Text&lt;/td&gt;

Using colspan like this:

        &lt;tr&gt;
            &lt;td align=&quot;center&quot; colspan=&quot;3&quot;&gt;check&lt;/td&gt;
        &lt;/tr&gt;

By colspan you merge the following cells in a row to one. If you use 2 in your sample you get one cell with a width of the first two columns and the third is as the third in the rest of the table.

alter the first row with the below

    &lt;tr&gt;
        &lt;td colspan=&quot;3&quot; align=&quot;center&quot;&gt;check&lt;/td&gt;
    &lt;/tr&gt;

To pass variables between steps I have the step methods belong to the same class, and use fields of the class for the passed information.

Here is an example as follows:

    Feature: Demo
    
      Scenario: Create user
        Given User creation form management
        When Create user with name &quot;TEST&quot;
        Then User is created successfully

Java class with steps definitions:

    public class CreateUserSteps {
    
       private String userName;
    
       @Given(&quot;^User creation form management$&quot;)
       public void User_creation_form_management() throws Throwable {
          // ...
       }
    
       @When(&quot;^Create user with name \&quot;([^\&quot;]*)\&quot;$&quot;)
       public void Create_user_with_name(String userName) throws Throwable {
          //...
          this.userName = userName;
       }
    
       @Then(&quot;^User is created successfully$&quot;)
       public void User_is_created_successfully() throws Throwable {
          // Assert if exists an user with name equals to this.userName
       }

My question is if it is a good practice to share information between steps? Or would be better to define the feature as:

    Then User with name &quot;TEST&quot; is created successfully



How to pass variables between cucumber-jvm steps

I have the following table.  I want to calculate a weighted average grouped by each date based on the formula below.  I can do this using some standard conventional code, but assuming that this data is in a pandas dataframe, is there any easier way to achieve this rather than through iteration?

    Date		ID		wt		value	w_avg
    01/01/2012	100		0.50	60		0.791666667
    01/01/2012	101		0.75	80
    01/01/2012	102		1.00	100
    01/02/2012  201		0.50	100		0.722222222
    01/02/2012	202		1.00	80

&gt; 01/01/2012 w_avg = 0.5 * ( 60/ sum(60,80,100)) + .75 * (80/
&gt; sum(60,80,100)) + 1.0 * (100/sum(60,80,100))
&gt; 
&gt; 01/02/2012 w_avg = 0.5 * ( 100/ sum(100,80)) + 1.0 * ( 80/
&gt; sum(100,80))



Calculate weighted average using a pandas/dataframe

I&#39;m not new to HTML but haven&#39;t touched it for some good time and I&#39;ve encountered an annoying problem.

I have a table with two rows.  
I want the first row to have one column - means that it will span the entire row, and I want the second row to have three columns, each one 33.3% of the row&#39;s width.

I have this code for the table :

    &lt;table width=&quot;900px&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
        &lt;tr&gt;
            &lt;td align=&quot;center&quot;&gt;check&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td align=&quot;center&quot;&gt;check&lt;/td&gt;
            &lt;td align=&quot;center&quot;&gt;check&lt;/td&gt;
            &lt;td align=&quot;center&quot;&gt;check&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;

But what happens is weird, the first row has one column with the same size as the second row&#39;s first column, and whenever I change one of them, it changes the other one too.

If I give the first row&#39;s `&lt;td&gt;` the width value of `500px` lets say, it sets the second row&#39;s first `&lt;td&gt;` to the same size.

What am I doing wrong ?


Make a &lt;td&gt; span the entire row in a table

I'm not new to HTML but haven't touched it for some good time and I've encountered an annoying problem.
I have a table with two rows. 
I want the first row to have one column - means that it will span the entire row, and I want the second row to have three columns, each one 33.3% of the row's width.
I have this code for the table :
<pre><code class="hljs language-php-template">&#x3C;table width="900px" border="0" cellspacing="0" cellpadding="0">
 &#x3C;tr>
 &#x3C;td align="center">check&#x3C;/td>
 &#x3C;/tr>
 &#x3C;tr>
 &#x3C;td align="center">check&#x3C;/td>
 &#x3C;td align="center">check&#x3C;/td>
 &#x3C;td align="center">check&#x3C;/td>
 &#x3C;/tr>
&#x3C;/table>
</code></pre>
But what happens is weird, the first row has one column with the same size as the second row's first column, and whenever I change one of them, it changes the other one too.
If I give the first row's <code>&#x3C;td></code> the width value of <code>500px</code> lets say, it sets the second row's first <code>&#x3C;td></code> to the same size.
What am I doing wrong ?

I want to make a centered circular image from rectangle photo.
The photo&#39;s dimensions is unknown. Usually it&#39;s a rectangle form.
I&#39;ve tried a lot of methods:

**Code**

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .image-cropper {
        max-width: 100px;
        height: auto;
        position: relative;
        overflow: hidden;
    }

    .image-cropper img{
        display: block;
        margin: 0 auto;
        height: auto;
        width: 150%; 
        margin: 0 0 0 -20%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;  
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;image-cropper&quot;&gt;
       &lt;img src=&quot;https://sf1.autojournal.fr/wp-content/uploads/autojournal/2012/07/4503003e3c38bc818d635f5a52330d.jpg&quot; class=&quot;rounded&quot; /&gt;
    &lt;/div&gt;


&lt;!-- end snippet --&gt;



CSS Circular Cropping of Rectangle Image

This looks very simply, but I can&#39;t figure it out. I&#39;m using the jquery validate plugin. I&#39;m trying to validate `&lt;input name=first&gt;` and `&lt;input name=second&gt;` to output the error messages into:

    &lt;span id=&quot;errNm2&quot;&gt;&lt;/span&gt; &lt;span id=&quot;errNm1&quot;&gt;&lt;/span&gt;

I already started writing the errorPlacement: which is where you customize your error message location. 

How can I put the errors message in those `&lt;span&gt;`?

&lt;!-- language: lang-js --&gt;

    $(document).ready(function () {
        $(&#39;#form&#39;).validate({
            errorPlacement: function(error, element) {
                error.append($(&#39;.errorTxt span&#39;));
            },
            rules,
    });

&lt;!-- language: lang-html --&gt;
              
    &lt;input type=&quot;text&quot; name=&quot;first&quot;/&gt;
    &lt;input type=&quot;text&quot; name=&quot;second&quot;/&gt;

    &lt;div class=&quot;errorTxt&quot;&gt;
       &lt;span id=&quot;errNm2&quot;&gt;&lt;/span&gt;
       &lt;span id=&quot;errNm1&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;

Jquery Validate custom error message location

Should be a fairly simple question. In my website I do this: 

    #landing-wrapper {
    	display:table;
    	width:100%;
    	background:url(&#39;landingpagepic.jpg&#39;);
    	background-position:center top;
    	height:350px;
    }

What I&#39;d like to do is make the background image darker. Since I have UI elements inside this DIV I don&#39;t think I can really place another div over it to darken it. Suggestions? 

Darken CSS background image?

Edit: New title.
What I&#39;m looking for is a document.querySelector for elements inside an iframe.

I&#39;ve done quite a bit of Googling for an answer and finally I&#39;m stumped.

I&#39;m trying to query inside an iframe. I&#39;m building string selectors to be used in Selenium and usually I just inspect the element with Firebug, and use document.querySelectorAll(&quot;theStringIBuid&quot;);

But it doesn&#39;t work with elements inside iframes. I&#39;ve tried all of the below to get an element &quot;radiobutton1&quot; inside the &quot;page-iframe&quot; iframe.


    var elem1 = &quot;.page-iframe&quot;;
    console.log(elem1);
    var elem2 = &quot;.radiobutton1&quot;;
    console.log(elem2);
    document.querySelectorAll(elem1+elem2+&quot;&quot;);

    document.querySelectorAll(&#39;.page-iframe&#39;).contentWindow.document.body.querySelectorAll(&#39;.radiobutton1&#39;)
    document.getElementById(&#39;.page-iframe&#39;).contentWindow.document.body.innerHTML;

    [].forEach.call( document.querySelectorAll(&#39;.page-iframe&#39;), 
    function  fn(elem){ 
    console.log(elem.contentWindow.document.body.querySelectorAll(&#39;.radiobutton1&#39;)); });

    var contentWindow = document.getElementById(&#39;.page-iframe&#39;).contentWindow 
    var contentWindow = document.querySelectorAll(&#39;.page-iframe&#39;) 
    var contentWindow = document.querySelectorAll(&#39;.page-iframe&#39;)[0].contentWindow

Thanks-

QuerySelector for Web Elements Inside iframe

I am building a responsive page and the media queries are firing at the wrong width size. I am using Chrome.

    @media screen and (max-width: 1200px) {
	 .logo-pic {
		display: none;
	}
    }

For example, this rule works it just fires at wrong size. This rule fires at 1320px and not 1200px.
I have the meta tag for html in place. It seems to be firing the media query 100 or so pixel wider than it normall should.

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

I checked the previous responsive site I made and those breakpoints are firing correctly. I&#39;ve tested the browser on different websites and the media queries are fine as well. 

I found a similiar question on stack overflow but it went unanswered.

https://stackoverflow.com/questions/23133609/media-queries-breakpoint-at-wrong-value

Not sure what the problem is?


Media Queries firing at wrong width

This is a hypothetical example:


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    table, thead, tbody, tr { width: 100%; }
        table { table-layout: fixed }
        table &gt; thead &gt; tr &gt; th { width: auto; }

&lt;!-- language: lang-html --&gt;

    &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Column A&lt;/th&gt;
              &lt;th&gt;Column B&lt;/th&gt;
              &lt;th&gt;Column C&lt;/th&gt;
              &lt;th class=&quot;absorbing-column&quot;&gt;Column D&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;Data A.1 lorem&lt;/td&gt;
              &lt;td&gt;Data B.1 ip&lt;/td&gt;
              &lt;td&gt;Data C.1 sum l&lt;/td&gt;
              &lt;td&gt;Data D.1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Data A.2 ipsum&lt;/td&gt;
              &lt;td&gt;Data B.2 lorem&lt;/td&gt;
              &lt;td&gt;Data C.2 some data&lt;/td&gt;
              &lt;td&gt;Data D.2 a long line of text that is long&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Data A.3&lt;/td&gt;
              &lt;td&gt;Data B.3&lt;/td&gt;
              &lt;td&gt;Data C.3&lt;/td&gt;
              &lt;td&gt;Data D.3&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;

&lt;!-- end snippet --&gt;


I want to have every single column&#39;s width to fit its content size, and leave the rest of the space for the one column with the &quot;absorbing-column&quot; class, so that it looks like this:

    | HTML                                                                   | 100%
    | body                                                                   | 100%
    | table                                                                  | 100%
    |------------------------------------------------------------------------|
    | Column A | Column B       | Column C | Column D                        |
    |------------------------------------------------------------------------|
    | Column A | Column B lorem | Column C | Column D                        |
    | Column A | Column B       | Column C | Column D                        |
    | Column A | Column B       | Column C | Column D                        |
    |------------------------------------------------------------------------|

You see, Column B is a bit bigger than the rest due to the extra data in the first row, but Column D always uses up the remaining space.

I played around with max-width, min-width, auto, etc. and could not figure out how to make this work.

In other words, I want all columns to take whatever width they need and not more, and then I want Column D to use up all of the remaining space inside the 100% width table.

How to get the &lt;td&gt; in HTML tables to fit content, and let a specific &lt;td&gt; fill in the rest

&gt;TypeError: a bytes-like object is required, not &#39;str&#39; 

getting above error while Executing below python code to save the HTML table data in Csv file. don&#39;t know how to get rideup.pls help me.

    import csv
    import requests
    from bs4 import BeautifulSoup
    
    url=&#39;http://www.mapsofindia.com/districts-india/&#39;
    response=requests.get(url)
    html=response.content
    
    soup=BeautifulSoup(html,&#39;html.parser&#39;)
    table=soup.find(&#39;table&#39;, attrs={&#39;class&#39;:&#39;tableizer-table&#39;})
    list_of_rows=[]
    for row in table.findAll(&#39;tr&#39;)[1:]:
        list_of_cells=[]
        for cell in row.findAll(&#39;td&#39;):
            list_of_cells.append(cell.text)
        list_of_rows.append(list_of_cells)
    outfile=open(&#39;./immates.csv&#39;,&#39;wb&#39;)
    writer=csv.writer(outfile)
    writer.writerow([&quot;SNo&quot;, &quot;States&quot;, &quot;Dist&quot;, &quot;Population&quot;])
    writer.writerows(list_of_rows)

on above the last line.

TypeError: a bytes-like object is required, not &#39;str&#39; in python and CSV

I understand this a popular issue, and I have read all the similar questions here on Stack Overflow and other sites (including the datatables website).

To clarify, I am using

 - PHP Codeigniter
 - Materliazecss

I have also made sure that I received the JSON array correctly:
    
    [{&quot;name_en&quot;:&quot;hello&quot;,&quot;phone&quot;:&quot;55555555&quot;},{&quot;name_en&quot;:&quot;hi&quot;,&quot;phone&quot;:&quot;00000000&quot;}]

My HTML table looks like this:

    &lt;table id=&quot;customer_table&quot;&gt;
         &lt;thead&gt;
             &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Phone&lt;/th&gt;
             &lt;/tr&gt;
         &lt;/thead&gt;
    &lt;/table&gt;

And here is my `document.ready` function:

      $(document).ready(function(){
                //$(&#39;#customer_table&#39;).DataTable();
                $(&#39;#customer_table&#39;).DataTable( {
                    &quot;ajax&quot;: &#39;json&#39;,
                    &quot;dataSrc&quot;: &quot;&quot;,
                     &quot;columns&quot;: [
                        { &quot;data&quot;: &quot;email&quot; },
                        { &quot;data&quot;: &quot;name_en&quot; }
                    ]
                });
      });

The error I am getting is

&gt; Uncaught TypeError: Cannot read property &#39;length&#39; of undefined

DataTables: Cannot read property &#39;length&#39; of undefined

In `Bootstrap 3`,  I could apply `col-sm-xx` to the `th` tags in the `thead` and resize table columns at will. However this doesn&#39;t work in bootstrap 4. How can I achieve something like this in bootstrap 4?

    &lt;thead&gt;
    &lt;th class=&quot;col-sm-3&quot;&gt;3 columns wide&lt;/th&gt;
    &lt;th class=&quot;col-sm-5&quot;&gt;5 columns wide&lt;/th&gt;
    &lt;th class=&quot;col-sm-4&quot;&gt;4 columns wide&lt;/th&gt;
    &lt;/thead&gt;


Looking at the codeply provided it doesn&#39;t size properly, especially if you add some data to the table. See how this runs:

    &lt;div class=&quot;container&quot; style=&quot;border: 1px solid black;&quot;&gt;
        &lt;table class=&quot;table table-bordered&quot;&gt;
        &lt;thead&gt;
            &lt;tr class=&quot;row&quot;&gt;
                &lt;th class=&quot;col-sm-3&quot;&gt;3 columns wide&lt;/th&gt;
                &lt;th class=&quot;col-sm-5&quot;&gt;5 columns wide&lt;/th&gt;
                &lt;th class=&quot;col-sm-4&quot;&gt;4 columns wide&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;123&lt;/td&gt;
                &lt;td&gt;456&lt;/td&gt;
                &lt;td&gt;789&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;/div&gt;



Content Type	Original Author	Original Content on Stackoverflow
Question	Nadav Peled	View Question on Stackoverflow
Solution 1 - Html	cypher75	View Answer on Stackoverflow
Solution 2 - Html	Widor	View Answer on Stackoverflow
Solution 3 - Html	armen.shimoon	View Answer on Stackoverflow
Solution 4 - Html	Nelu	View Answer on Stackoverflow
Solution 5 - Html	Christian	View Answer on Stackoverflow
Solution 6 - Html	Aru	View Answer on Stackoverflow

Make a <td> span the entire row in a table

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

Solution 6 - Html

Calculate weighted average using a pandas/dataframe

How to pass variables between cucumber-jvm steps

Attributions